Form
Form primitives built on React Hook Form and Radix UI. Provides automatic validation, error messaging, and accessibility.
Form Pattern
Usage
Use the Form components with React Hook Form for complex forms requiring validation. For simple forms, composing Label, Input, and Button directly is sufficient.
The Form system provides FormField, FormItem, FormLabel, FormControl, FormDescription, and FormMessage for structured form layouts with error handling.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| FormField | component | — | Wraps a controlled form field with RHF Controller |
| FormItem | component | — | Container for label, input, description, and error |
| FormLabel | component | — | Accessible label linked to the field |
| FormMessage | component | — | Displays validation error messages |
| FormDescription | component | — | Help text below the field |