Floating labels.
Inline validation.
Custom checkboxes, radios, and a toggle switch.
A gradient button with a press-down micro-interaction.
Every bit of it below is CSS — no form library, no , no event listener wiring up a class toggle.
That's — the module in the FSCSS ecosystem.
Same philosophy each time: solve the hard visual problem once, ship it as importable mixins, let the browser do the actual work.
The two tricks doing all the work Forms feel like they need JavaScript because most tutorials reach for it immediately.
Two native CSS mechanisms cover almost everything a "modern" form needs.
Floating labels run entirely on .
Give the input — a literal space, not empty — and the browser now knows, purely in CSS, whether the field is empty and unfocused: No state, no class toggling on keyup.
The label just reacts to what the browser already knows about the input.
Checkboxes, radios, and the switch all use the classic checkbox-hack: the real stays in the DOM (so it keeps native keyboard support and form submission) but is visually hidden, and a sibling becomes the thing you actually see: The checkmark itself isn't an icon font or an SVG — it's two sides on a pseudo-element, rotated 45 degrees.
Same trick powers the radio dot and the switch thumb slide, just with different shapes and transforms.
Validation Add or straight to the field wrapper.
One mixin call registers the rule; every field just reacts to its own class: Your actual validation logic — regex, an API check, whatever — still needs real JS somewhere.
But the presentation layer of "this field is wrong, here's why" needs nothing but toggling one class name. no state management for something.
Full example Every visual state in that form — resting, focused, filled, valid, invalid, checked, hovered, pressed — is handled by CSS pseudo-classes doing what they were always built to do.
JavaScript's only job left is your logic: submit handling, async validation, whatever's actually specific to your product.
Try it Full docs, token reference, and markup gotchas (input-before-label ordering, the requirement, sibling-selector rules): github.com/fscss-ttr/form.fscss