Form

Accessible form fields with react-hook-form and zod validation. Handles labels, descriptions, and error messages with correct ARIA wiring.

Import Form primitives and wire up a schema — see the code tab.

Prop	Type	Default	Description
Form	FormProvider	—	Wraps the form. Spread useForm() return value into it.
FormField	ControllerProps	—	Connects a field to react-hook-form via render prop. Provides field state via context.
FormItem	div	—	Container for a single field group. Generates a unique id shared by label, input, and messages.
FormLabel	label	—	Label for the field. Turns red when the field has an error.
FormControl	div	—	Wrapper around the actual input. Wires up aria-describedby and aria-invalid.
FormDescription	p	—	Helper text shown below the input.
FormMessage	p	—	Shows the zod validation error for this field. Renders nothing when there is no error.