VLLNT UI · Component family
Form components
Form components cover the full input surface — text and search fields, selects, checkboxes, date and time pickers, ratings, and validation — so you can assemble accessible, controlled forms without wiring primitives by hand.
Text Inputs
Typed input fields for text, numbers, passwords, phone numbers, OTP codes, and inline editing.
Text Field
Labelled text input bundling description and error message.
3 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 storyNumber 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 storiesSelection Controls
Dropdowns, comboboxes, list boxes, and multi-select controls for choosing from predefined options.
Select
Dropdown select input for choosing from a list of options.
1 storyNative Select
Styled wrapper around the native select element.
2 storiesCombobox
Searchable select input for choosing from a list of options.
2 storiesMulti Select
Popover-based multi-selection input with selected-value badges and optional search.
3 storiesList Box
Accessible single- or multi-select list of options.
2 storiesSegmented Control
Single-choice segmented selector for switching modes, views, or filters.
3 storiesButton Group
Visually connected group of buttons that share borders.
2 storiesCheckbox Group
Group of related checkboxes backed by an array of selected values.
3 storiesTags & Custom Pickers
Tag editors, color pickers, and scoped selectors for specialized selection and entry tasks.
Tag Group
Set of tags supporting selection and removal.
2 storiesTags Input
Keyboard-friendly tag editor for adding and removing string values.
3 storiesColor Picker
Popover color picker with swatches, a hue slider, and a hex input.
2 storiesScope Selector
Multi-level scope picker for nested environments, teams, and targets.
2 storiesSearch & Filtering
Search bars, search fields, filter bars, and category filters for querying and narrowing content lists.
Date & Time
Calendars, date pickers, range pickers, and time selectors for capturing dates, times, and playback ranges.
Calendar
Date picker calendar for selecting dates.
1 storyRange Calendar
Calendar that selects a start and end date as a range.
3 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 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 storiesForm Structure
Form wrappers, fields, fieldsets, item rows, and file uploads for composing and validating complete forms.
Form
Validation wrapper for composing labels, descriptions, controls, and messages.
2 storiesField
Layout wrapper pairing a label, control, description, and error message.
3 storiesFieldset
Groups related fields under a shared legend.
2 storiesItem
Flexible row layout with leading media, content, and trailing actions.
2 storiesFile Upload
Dropzone-style file picker with previews for selected files.
1 storyNewsletter Signup
Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels.
5 storiesReadable by agents
Your AI agent can install these too.
The registry is exposed as structured data, so coding agents pick the right component without scraping HTML.
Frequently asked
- What input types are covered?
- Text, search, and phone fields, selects and comboboxes, checkboxes and radio groups, date/time/range pickers, ratings, OTP inputs, and validation wrappers.
- Are the form components accessible and validated?
- Yes. Inputs are accessible by default and integrate with react-hook-form via the Form components; they work controlled or uncontrolled.