Form

When to use

Use for any form that needs validation, per-field errors, and accessible aria-describedby/aria-invalid wiring. Pair with zod schemas via @hookform/resolvers/zod.

When not to use

Don't use for trivial single-input forms that don't need validation (render a plain Input + Button). Don't use for server actions forms in Next.js 16 (consider useActionState + useFormStatus instead).

Common mistakes

• Forgetting to spread {...field} into the form control (connects value/onChange)
• Putting FormLabel outside FormItem (loses htmlFor wiring)
• Using useForm without a resolver when zod validation is desired
• Calling form.handleSubmit without a callback

Accessibility

FormControl automatically wires id, aria-describedby, and aria-invalid. FormLabel uses htmlFor matching the control id. Errors are announced via FormMessage with matching aria-describedby.

Related components

• input
• textarea
• select
• checkbox
• radio-group
• switch