Comprehensive Inputs

Showcases every input primitive in the design system wired with TanStack Form and Zod validation, grouped by component type: text, date, textarea, select, combobox, dropdowns, trees, toggles, choicebox, checkbox, and switch.

Text Input → Input

Date → InputDate

mmddyyyy

Editable Date → InputDate (editable)

mmddyyyy

Segment-based: type into each part, arrow keys to adjust, calendar icon to pick.

Date Range → InputDateRange

mmddyyyy
mmddyyyy

Number → InputNumber

Formatted number with currency prefix and decimal control.

Pattern → InputPattern

Masked input for US phone numbers.

Textarea → Textarea

Optional. Max 200 characters.

Select → InputSelect

Searchable Select → InputSelect (searchable)

Searchable + Clearable → InputSelect (searchable + clearable)

Clearable — value can be null.

Combobox → InputCombobox

Searchable select wrapping the Combobox primitive.

Multi Combobox → InputCombobox (multiple)

Multi-select combobox with chips. Type to filter, click to add/remove.

Dropdown Single Select → DropdownSingleSelect

Supports icons and keyword search.

Dropdown Multi Select → DropdownMultiSelect

Dropdown Tree → DropdownTree

Hierarchical selection with nested submenus.

Breadcrumb Tree → BreadcrumbTreeSelector

Breadcrumb-style navigation for hierarchical data.

Toggle Group → ToggleGroupSelect

Choicebox → InputChoicebox

Multi Choicebox → InputChoicebox (multiple)

Select one or more notification channels.

Checkbox → Checkbox

Switch → Switch

Filter Single Select → FilterSingleSelect (URL-backed)

Single filter

Synced to URL: ?priority=...

Filter Multi Select → FilterMultiSelect (URL-backed)

Multi filter

Synced to URL: ?filterTags=...