Forms
Form Controls
Production form controls — Input, Textarea, Select, Checkbox, Radio, Switch, Label and the FormField wrapper. Contrast-tuned borders, legible placeholders, a premium roxo focus ring, helper text, read-only state, and real-time validation with animated transitions. Built to the Button reference, WCAG AA measured.
Field states
The five core states side by side. Click into 'Focus' to see the layered roxo ring — it's the best state of the component.
Real-time validation
Pass a `validate` function straight to the control — it runs on every keystroke, flips state, and animates the message in/out. No FormField needed. Type in these:
We'll only use it to send your receipt.
A sentence or two is plenty.
Flip the buttons — watch the border, ring and message animate.
Input
52px tall, 14px radius. Icons, inline prefix/suffix, helper text, and the full state set. Type in it — it's controlled.
Helper text renders right under the field.
That doesn't look right.
Textarea
Same visual language. Optional auto-resize and a character counter that warns in amber near the limit and turns danger at the cap.
Saved to draft.
Select
Accessible custom listbox — open it and use ↑/↓, Home/End, type to search, Enter to pick, Esc to close. Not the native select.
You can change this anytime.
Please pick a plan.
Checkbox
Custom box with an animated check, indeterminate support, clickable label + description. Tab to one and see the roxo focus ring.
Radio & RadioGroup
Roving keyboard focus inside the group (arrow keys), role=radiogroup, animated dot with the roxo focus ring.
Switch
role=switch with a Framer thumb that slides. Three sizes, label + description, roxo focus ring, disabled.
Label
Typed, associates via htmlFor, required asterisk, error colour, three sizes.
FormField
The wrapper products use daily: Label + control + hint + error/success message, with aria-describedby / aria-invalid / required wired automatically. The Email field validates live as you type.
We'll never share it.
Legal business name.
You can change this later.
This card was declined.
Max 200 characters.