ComponentClient component

Form

Accessible react-hook-form bindings for controls, descriptions and validation messages.

Installation

Preview

Usage

tsx

import { useForm } from "react-hook-form"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"

const form = useForm({ defaultValues: { email: "" } })

<Form {...form}>
  <form onSubmit={form.handleSubmit(console.log)}>
    <FormField control={form.control} name="email" render={({ field }) => (
      <FormItem>
        <FormLabel>Email</FormLabel>
        <FormControl><Input {...field} /></FormControl>
        <FormMessage />
      </FormItem>
    )} />
  </form>
</Form>

API reference

Prop	Type	Default	Description
`control`	`Control<TFieldValues>`	`—`	The react-hook-form control instance.
`name`	`FieldPath<TFieldValues>`	`—`	The strongly typed field path.
`className`	`string`	`—`	Overrides or extends the generated Tailwind classes.
`disabled`	`boolean`	`false`	Prevents user interaction when supported.