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. Install Text Field from the VLLNT UI registry with the shadcn CLI.
3 storiesInline Input
Inline text input with keyboard commit and cancel support. Install Inline Input from the VLLNT UI registry with the shadcn CLI.
1 storyInput Group
Groups an input with leading or trailing addons. Install Input Group from the VLLNT UI registry with the shadcn CLI.
3 storiesInput OTP
One-time password input with segmented fields. Install Input OTP from the VLLNT UI registry with the shadcn CLI.
1 storyNumber Input
Numeric input with increment and decrement controls. Install Number Input from the VLLNT UI registry with the shadcn CLI.
1 storyPassword Input
Password field with a built-in visibility toggle. Install Password Input from the VLLNT UI registry with the shadcn CLI.
1 storyPhone Input
Phone number input with a country dialing-code selector. Install Phone Input from the VLLNT UI registry with the shadcn CLI.
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. Install Select from the VLLNT UI registry with the shadcn CLI.
1 storyNative Select
Styled wrapper around the native select element. Install Native Select from the VLLNT UI registry with the shadcn CLI.
2 storiesCombobox
Searchable select input for choosing from a list of options. Install Combobox from the VLLNT UI registry with the shadcn CLI.
2 storiesMulti Select
Popover-based multi-selection input with selected-value badges and optional search. Install Multi Select from the VLLNT UI registry with the shadcn CLI.
3 storiesList Box
Accessible single- or multi-select list of options. Install List Box from the VLLNT UI registry with the shadcn CLI.
2 storiesSegmented Control
Single-choice segmented selector for switching modes, views, or filters. Install Segmented Control from the VLLNT UI registry with the shadcn CLI.
3 storiesButton Group
Visually connected group of buttons that share borders. Install Button Group from the VLLNT UI registry with the shadcn CLI.
2 storiesCheckbox Group
Group of related checkboxes backed by an array of selected values. Install Checkbox Group from the VLLNT UI registry with the shadcn CLI.
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. Install Tag Group from the VLLNT UI registry with the shadcn CLI.
2 storiesTags Input
Keyboard-friendly tag editor for adding and removing string values. Install Tags Input from the VLLNT UI registry with the shadcn CLI.
3 storiesColor Picker
Popover color picker with swatches, a hue slider, and a hex input. Install Color Picker from the VLLNT UI registry with the shadcn CLI.
2 storiesScope Selector
Multi-level scope picker for nested environments, teams, and targets. Install Scope Selector from the VLLNT UI registry with the shadcn CLI.
2 storiesSearch & Filtering
Search bars, search fields, filter bars, and category filters for querying and narrowing content lists.
Category Filter
Filterable category selection for content lists. Install Category Filter from the VLLNT UI registry with the shadcn CLI.
1 storyFilter Bar
Horizontal bar with filter controls for content lists. Install Filter Bar from the VLLNT UI registry with the shadcn CLI.
1 storySearch Bar
Text search input with icon and clear functionality. Install Search Bar from the VLLNT UI registry with the shadcn CLI.
1 storySearch Field
Search input with a leading icon and a clear button. Install Search Field from the VLLNT UI registry with the shadcn CLI.
2 storiesDate & Time
Calendars, date pickers, range pickers, and time selectors for capturing dates, times, and playback ranges.
Calendar
Date picker calendar for selecting dates. Install Calendar from the VLLNT UI registry with the shadcn CLI.
1 storyRange Calendar
Calendar that selects a start and end date as a range. Install Range Calendar from the VLLNT UI registry with the shadcn CLI.
3 storiesDate Field
Native date input styled to match the design system. Install Date Field from the VLLNT UI registry with the shadcn CLI.
2 storiesDate Picker
Single-date picker built with the shared calendar and popover primitives. Install Date Picker from the VLLNT UI registry with the shadcn CLI.
2 storiesDate Range Picker
Popover calendar for selecting a start and end date. Install Date Range Picker from the VLLNT UI registry with the shadcn CLI.
2 storiesTime Field
Native time input styled to match the design system. Install Time Field from the VLLNT UI registry with the shadcn CLI.
2 storiesTime Picker
Popover time selector built from hour and minute columns. Install Time Picker from the VLLNT UI registry with the shadcn CLI.
2 storiesTimeline Scrubber
Range slider for scrubbing through canvas state playback, with optional milestone ticks. Install Timeline Scrubber from the VLLNT UI registry with the shadcn CLI.
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. Install Form from the VLLNT UI registry with the shadcn CLI.
2 storiesField
Layout wrapper pairing a label, control, description, and error message. Install Field from the VLLNT UI registry with the shadcn CLI.
3 storiesFieldset
Groups related fields under a shared legend. Install Fieldset from the VLLNT UI registry with the shadcn CLI.
2 storiesItem
Flexible row layout with leading media, content, and trailing actions. Install Item from the VLLNT UI registry with the shadcn CLI.
2 storiesFile Upload
Dropzone-style file picker with previews for selected files. Install File Upload from the VLLNT UI registry with the shadcn CLI.
1 storyNewsletter Signup
Email-capture form with idle/sending/sent/error state machine, custom validators, and overridable labels. Install Newsletter Signup from the VLLNT UI registry with the shadcn CLI.
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.