Form atoms that actually work. Type in the fields, drag the sliders, toggle the switches — every control below is a live, focusable element with real React state, not a screenshot.
Entry
Floating labels, icon slots, prefixes, validation states and AI prompt bars. Every one is a real focusable input — click in and type.
Floating label
Password toggle
28/60
Character count
Basic
With icon
Glow focus
Underline
Prefix / suffix
✕ Enter a valid email
Error state
Success state
AI prompt bar
Disabled
Binary
Switches, checkboxes, radio groups, card selectors and sliding segmented controls — all keyboard reachable.
Switch
Switch (small)
Checkbox
Radio group
Card radio
Sliding segment
Icon switch
Indeterminate
Ranges
Range inputs with gradient tracks, step sliders, colour swatches, star ratings and OTP boxes.
Range slider
Step slider
Colour picker
Star rating
Quantity
Select
Date field
OTP boxes
Composite
Drag-and-drop zones, upload progress rows, tag inputs and copy-to-clipboard fields.
Drop files here
PNG, JPG up to 10MB
Drop zone
brand-guide.pdf
File row
Avatar upload
Search with ⌘K
Tag input
Copy field