Basic
With Validation
Tab out of a field to trigger validation. Submit to see all errors.
Sub-components
| Component | Description |
|---|---|
| Form | Root provider wrapping react-hook-form FormProvider |
| Form.Field | Connects a field to form state via Controller |
| Form.Item | Wrapper that provides field ID context |
| Form.Label | Label connected to its field via htmlFor |
| Form.Control | Slot that passes aria attributes to the input |
| Form.Description | Help text below the input |
| Form.Message | Validation error message |
Field Props
| Prop | Type | Description |
|---|---|---|
| control | Control | react-hook-form control object |
| name | string | Field name path |
| rules | RegisterOptions | Validation rules |
| render | ({ field, fieldState }) => ReactNode | Render function for the field |
Usage
const form = useForm({ defaultValues: { name: "" } });
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)}>
<Form.Field
control={form.control}
name="name"
rules={{ required: "Name is required" }}
render={({ field }) => (
<Form.Item>
<Form.Label>Name</Form.Label>
<Form.Control>
<Input {...field} />
</Form.Control>
<Form.Description>Help text.</Form.Description>
<Form.Message />
</Form.Item>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>