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.

Browse all components How agents consume the registry37 components

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.

WebNative

3 storiesView component

Inline Input

Inline text input with keyboard commit and cancel support. Install Inline Input from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Input Group

Groups an input with leading or trailing addons. Install Input Group from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Input OTP

One-time password input with segmented fields. Install Input OTP from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Number Input

Numeric input with increment and decrement controls. Install Number Input from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Password Input

Password field with a built-in visibility toggle. Install Password Input from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Phone Input

Phone number input with a country dialing-code selector. Install Phone Input from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Selection 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.

WebNative

1 storyView component

Native Select

Styled wrapper around the native select element. Install Native Select from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Combobox

Searchable select input for choosing from a list of options. Install Combobox from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Multi 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.

WebNative

3 storiesView component

List Box

Accessible single- or multi-select list of options. Install List Box from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Segmented Control

Single-choice segmented selector for switching modes, views, or filters. Install Segmented Control from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Button Group

Visually connected group of buttons that share borders. Install Button Group from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Checkbox Group

Group of related checkboxes backed by an array of selected values. Install Checkbox Group from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Tags & 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.

WebNative

2 storiesView component

Tags Input

Keyboard-friendly tag editor for adding and removing string values. Install Tags Input from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Color 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.

WebNative

2 storiesView component

Scope Selector

Multi-level scope picker for nested environments, teams, and targets. Install Scope Selector from the VLLNT UI registry with the shadcn CLI.

Web

2 storiesView component

Search & 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.

WebNative

1 storyView component

Filter Bar

Horizontal bar with filter controls for content lists. Install Filter Bar from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Search Bar

Text search input with icon and clear functionality. Install Search Bar from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Search Field

Search input with a leading icon and a clear button. Install Search Field from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Date & 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.

WebNative

1 storyView component

Range Calendar

Calendar that selects a start and end date as a range. Install Range Calendar from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Date Field

Native date input styled to match the design system. Install Date Field from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Date Picker

Single-date picker built with the shared calendar and popover primitives. Install Date Picker from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Date Range Picker

Popover calendar for selecting a start and end date. Install Date Range Picker from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Time Field

Native time input styled to match the design system. Install Time Field from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Time Picker

Popover time selector built from hour and minute columns. Install Time Picker from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Timeline 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.

WebNative

4 storiesView component

Form 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.

WebNative

2 storiesView component

Field

Layout wrapper pairing a label, control, description, and error message. Install Field from the VLLNT UI registry with the shadcn CLI.

WebNative

3 storiesView component

Fieldset

Groups related fields under a shared legend. Install Fieldset from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

Item

Flexible row layout with leading media, content, and trailing actions. Install Item from the VLLNT UI registry with the shadcn CLI.

WebNative

2 storiesView component

File Upload

Dropzone-style file picker with previews for selected files. Install File Upload from the VLLNT UI registry with the shadcn CLI.

WebNative

1 storyView component

Newsletter 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.

Web

5 storiesView component

Readable 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.

/llms.txt

Concise index per the llmstxt.org spec — sections, links, and descriptions.

/llms-full.txt

Full registry context in one fetch — docs plus every component descriptor.

/r/<name>.json

Per-component descriptor: props, accessibility schema, and usage examples.

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.