Form components
Inputs, controls, and validation for accessible forms.
38 components
Button Group
Visually connected group of buttons that share borders.
2 storiesCalendar
Date picker calendar for selecting dates.
1 storyCategory Filter
Filterable category selection for content lists.
1 storyCheckbox Group
Group of related checkboxes backed by an array of selected values.
3 storiesColor Picker
Popover color picker with swatches, a hue slider, and a hex input.
2 storiesCombobox
Searchable select input for choosing from a list of options.
2 storiesDate Field
Native date input styled to match the design system.
2 storiesDate Picker
Single-date picker built with the shared calendar and popover primitives.
2 storiesDate Range Picker
Popover calendar for selecting a start and end date.
2 storiesField
Layout wrapper pairing a label, control, description, and error message.
3 storiesFieldset
Groups related fields under a shared legend.
2 storiesFile Upload
Dropzone-style file picker with previews for selected files.
1 storyFilter Bar
Horizontal bar with filter controls for content lists.
1 storyForm
Validation wrapper for composing labels, descriptions, controls, and messages.
2 storiesInline Input
Inline text input with keyboard commit and cancel support.
1 storyInput Group
Groups an input with leading or trailing addons.
3 storiesInput OTP
One-time password input with segmented fields.
1 storyItem
Flexible row layout with leading media, content, and trailing actions.
2 storiesList Box
Accessible single- or multi-select list of options.
2 storiesModel Selector
Dropdown selector for choosing AI models.
1 storyMulti Select
Popover-based multi-selection input with selected-value badges and optional search.
3 storiesNative Select
Styled wrapper around the native select element.
2 storiesNewsletter Signup
Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels.
5 storiesNumber Input
Numeric input with increment and decrement controls.
1 storyPassword Input
Password field with a built-in visibility toggle.
1 storyPhone Input
Phone number input with a country dialing-code selector.
2 storiesRange Calendar
Calendar that selects a start and end date as a range.
3 storiesScope Selector
Multi-level scope picker for nested environments, teams, and targets.
2 storiesSearch Bar
Text search input with icon and clear functionality.
1 storySearch Field
Search input with a leading icon and a clear button.
2 storiesSegmented Control
Single-choice segmented selector for switching modes, views, or filters.
3 storiesSelect
Dropdown select input for choosing from a list of options.
1 storyTag Group
Set of tags supporting selection and removal.
2 storiesTags Input
Keyboard-friendly tag editor for adding and removing string values.
3 storiesText Field
Labelled text input bundling description and error message.
3 storiesTime Field
Native time input styled to match the design system.
2 storiesTime Picker
Popover time selector built from hour and minute columns.
2 storiesTimeline Scrubber
Range slider for scrubbing through canvas state playback, with optional milestone ticks.
4 stories