Form

`<form>` wrapper that establishes the standard vertical rhythm between fields and sections, and can disable every descendant control at once (e.g. while submitting) via a native `<fieldset disabled>` boundary.

import { Form, FormField, FieldGroup, FieldSet, FormSection } from "@/design-system";

FormField

Connects a visible label, optional description and a single validation message (error, success or warning) to exactly one control, generating and wiring all the ids for you.

import { FormField, FormLabel, FormDescription, FormMessage } from "@/design-system";

FieldGroup, FieldSet & FormSection

Layout helpers for longer forms: FieldGroup places closely related fields side by side, FieldSet groups controls under a native legend, and FormSection titles a whole segment of the form.

import { FieldGroup, FieldSet, FormSection } from "@/design-system";

SearchInput

A text field dedicated to search: leading icon, clear affordance once there's a value, and a loading state for async results.

import { SearchInput } from "@/design-system";

NumberInput

A numeric field with min/max/step, stepper buttons and native keyboard arrow support — for quantities, prices and other bounded numbers.

import { NumberInput } from "@/design-system";

PasswordInput

A password field with a show/hide visibility toggle that announces its pressed state, for sign-in and account forms.

import { PasswordInput } from "@/design-system";

Combobox

A single-select typeahead field for choosing one value from a longer list, such as a country or a customer — searchable rather than a long native <select>.

import { Combobox } from "@/design-system";

MultiSelect

Like Combobox, but for choosing several values at once; selections render as removable tags inside the trigger.

import { MultiSelect } from "@/design-system";

DatePicker

A single-date field: a button trigger showing the formatted date, opening a keyboard-navigable calendar popover on activation.

import { DatePicker } from "@/design-system";

DateRangePicker

Selects a start and end date together — a booking stay, a reporting period, a dashboard time filter. Always labelled: the visible label defaults to “Date range”, so the trigger is never ambiguous outside its surrounding context.

import { DateRangePicker } from "@/design-system";

TimePicker

An accessible time selector presenting a listbox of time slots at a configurable step, in 12- or 24-hour format — for scheduling meetings or deliveries.

import { TimePicker } from "@/design-system";

Slider

A single-thumb slider for choosing one value within a bounded range, e.g. a budget or a volume level.

import { Slider } from "@/design-system";

RangeSlider

A two-thumb slider for selecting a numeric range, such as a price band or an age bracket.

import { RangeSlider } from "@/design-system";

ToggleGroup

A set of toggle buttons that are either mutually exclusive (type=’single’, e.g. text alignment) or independently toggled (type=’multiple’, e.g. notification channels).

import { ToggleGroup, ToggleGroupItem } from "@/design-system";

Form layouts

Reusable layout patterns for form bodies: single-column, two-column, compact and inline. FormLayout is a responsive grid; FormActions is the footer row for submit/cancel.

import { FormLayout, FormLayoutFull, InlineForm, FormActions } from "@/design-system";

File upload in forms

FileUpload, Dropzone and FileList/FileItem composed inside the form field system, with upload progress rendered by the existing Progress component.

import { FileUpload, Dropzone, FileList } from "@/design-system";

Textarea

Multi-line text field for longer free-form content such as comments or descriptions, shown here inside a FormField for context.

import { Textarea, FormField } from "@/design-system";

Complete form example

This example demonstrates how individual form components can be composed into a complete, production-ready form. Use it as a reference for layout, hierarchy, spacing, validation and responsive behaviour.