Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThis item has no props to tune. Use the lens above to change theme, density, direction and more.
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"
import { Field, FieldError, FieldLabel } from "@/components/ui/field"const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: { title: "" },
})
<form onSubmit={form.handleSubmit(onSubmit)}>
<Controller
name="title"
control={form.control}
render={({ field, fieldState }) => (
<Field data-invalid={fieldState.invalid}>
<FieldLabel htmlFor={field.name}>Title</FieldLabel>
<Input {...field} id={field.name} aria-invalid={fieldState.invalid} />
{fieldState.invalid && <FieldError errors={[fieldState.error]} />}
</Field>
)}
/>
</form>See the React Hook Form documentation for the full list of props.
The preview composes Field with React Hook Form's Controller, which is the current recommended pattern. The Form, FormField, FormItem, FormLabel, FormControl, FormDescription and FormMessage helpers from components/ui/form.tsx are still available for existing forms; they wire the same aria-describedby and aria-invalid attributes through React context.