Forms

Controls for entering and choosing data, from a single button to a date range. 15 components, each with live examples, an install command and its props.

Button
Displays a button or a component that looks like a button.
Calendar7 examples
Pick a single date, a range, or a date with time.
Checkbox6 examples
Toggle between checked and not checked.
Combobox7 examples
Autocomplete with a filterable list, single or multi-select.
Date Picker5 examples
A calendar in a popover for dates, ranges and times.
Field3 examples
A label, a control, a description and an error in one field.
Input11 examples
A text input with built-in styling and accessibility.
Input Group14 examples
Addons, buttons and helper content around an input.
Input Number8 examples
A number input with steppers.
Input OTP6 examples
One-time password cells with copy and paste.
Label
An accessible label tied to its control.
Radio Group
Options where only one can be checked.
Segmented
Mutually exclusive options as one control.
Select
A list of options opened from a trigger.
Slider
A value or a range within limits.
Button Scramble
A call-to-action button whose label scrambles into place on hover, with primary and secondary variants, three sizes, an optional corner arrow and loading and disabled states.
Switch
A control that toggles between checked and unchecked states.
Textarea
Displays a form textarea or a component that looks like a textarea.
Uploader
A drag-and-drop file field with per-file progress, replace, and error states.
Vietnamese Input
A text input with a built-in Vietnamese input method: Telex and VNI keystrokes become diacritics in place as you type, with modern tone placement, and pass-through when disabled. The method prop switches between telex and vni; the use-vietnamese-input hook drives any input or textarea without an OS IME.
Chat
Every chat composer the catalog holds, composed from Input Group: the builder's stop-to-cancel send and the form editor's steerable turn with a separate abort.