Form controls

Inputs that don’t fight you.

Every state covered — default, hover, focus, disabled, error, success. Every label visible. Every error announced. Every interaction reachable by keyboard.

01 · States

One input, six states.

The same email field across every required state. Validate on blur, surface errors with role=alert, never remove the focus ring without a replacement.

defaultEmail address
We'll send a confirmation link.
Resting state — neutral border, surface bg.
hoverEmail address
Border darkens as the cursor enters.
Hover — border darkens one step (no fill change).
focusEmail address
Brand ring while focused; never outline:none without a replacement.
Focus — 2px brand ring, brand-tinted border.
disabledEmail address
Locked while the parent step is in flight.
Disabled — opacity 0.6, cursor not-allowed.
errorEmail address
Validate on blur, then live-update as the user fixes it.
Looks like that email is missing a domain.
Error — token-mixed red border, message announced via role=alert.
successEmail address
Confirmed — debounced after blur, never on every keystroke.
Email looks good.
Success — token-mixed green border, leading check icon.

02 · Gallery

Every input type the plugin produces.

Toggles, checkboxes, radios, sliders — hand-rolled with semantic <input> underneath. The combobox, multi-select, tag input, and date picker are vanilla React and ~30 lines each.

Text input
Single-line free text.
Search
Leading icon, clear button on input.
Textarea
Audit-friendly tokens, dark mode by default, motion respects prefers-reduced-motion.
84/280
Auto-grows; live character counter.
Number
Stepper buttons; tabular numerals.
Select
Native select with custom chevron.
Date
Visual-only popover with hand-rolled calendar.
Combobox
Filterable autocomplete.
Multi-select chips
ReactSvelte
Add multiple values; remove via chip × or Backspace.
Tag input
#design
Press Enter or comma to commit a tag.
File upload
Drop a file or browsePNG, SVG, PDF up to 10 MB
Drag-drop zone; native input under the hood.
Toggle switch
Notifications
aria-checked is the source of truth.
Checkbox group
EmailPushSMS
Pick any combination.
Radio group
LightDarkSystem
Pick exactly one.
Slider
Range with live tooltip.

03 · Pattern

A real, polished signup form.

Five input types composed into a coherent flow. Stacked layout, helper text, error summary at the top, primary submit + secondary cancel. Submit shows a 1.5s loading state then confirms.