Buttons & inputs
Actions and form controls.
Toggle Switch
An accessible on/off switch built on a native button.
Text Field
A labeled text input with clear focus and placeholder states.
Select
A custom listbox with a sliding highlight and real combobox semantics.
Checkbox
An accessible checkbox with a spring-drawn check and a tick burst.
Slider
A range input with a gradient fill, thumb glow, and drag tooltip.
OTP Input
A one-time-code field with auto-advance, paste splitting, and a success wave.
Enter the 6 digit code
Sent to jordan@example.com. Demo code is 284920.
Paste the code anywhere in the row to see it cascade in.
Type and it auto advances; Backspace steps back and clears; arrow keys, Home and End move between boxes. Paste a full code into any box and the digits stagger in left to right. A complete code runs a wave, then a green ripple on success or a shake on a wrong code.
Combobox
A multi-select typeahead with fuzzy ranking, match bolding, and chips.
Project stack
Type to filter. Matched letters are bold; the bars on the right show match strength.
Fuzzy subsequence matching (try nxt for Next.js, clkh for ClickHouse, k8s for Kubernetes) ranks and reorders the list live, with a word-start and contiguity bonus. Arrow keys move a spring-slid highlight, Enter toggles, Backspace on an empty field removes the last chip. First open runs a short async load; no exact match offers a Create row.
Radio Group
Card-style single choice with roving tabindex and a sliding ring.
Delivery speed
Selected: Express
A real radiogroup: one Tab stop, then arrow keys (any direction), Home and End move the selection and wrap, skipping the disabled option. The selected card lifts, its dot springs in, and an emerald ring slides between cards on a shared layoutId. Reduced motion keeps the ring but drops the slide.
Search Input
A debounced search field with a spinner, clear button, and focus shortcut.
The magnifier crossfades to a spinner while a debounced search is in flight (300ms after the last keystroke, then a mocked 420ms fetch). A clear button springs in once there is text, and the result count pill updates. Escape is two stage: the first press clears the field, the second closes the results. Pick a command to fill the field, or press the slash key anywhere outside a field to focus it.
Color Picker
A self-contained HSV picker in a popover, no native colour dialog.
A self-contained HSV picker: a saturation and brightness field, a hue rail, a hex field, and a preset row, all in one popover, with no native colour input and no OS dialog. The field and rail are real sliders with pointer capture and arrow-key control (Shift for coarser steps), and the popover closes on Escape or an outside click.
Document Upload
A drag-and-drop dropzone over a real file input, single or multiple.
Hover Border Gradient
A button ringed by a rotating conic-gradient comet.