Form

React Hook Form owns field state and submission. Zod owns the schema, while the Field family owns labels, descriptions, invalid styling, and announced error messages. The recipe remains application code so its data model does not leak into a generic wrapper.

const schema = z.object({
  title: z.string().min(5, "Use at least 5 characters."),
})

const form = useForm<z.infer<typeof schema>>({
  resolver: zodResolver(schema),
  defaultValues: { title: "" },
})

Supply every controlled field with a default value. This keeps the first client render aligned with the server and makes reset behavior predictable.

<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} />
      <FieldError errors={[fieldState.error]} />
    </Field>
  )}
/>

Use the same bridge for Base UI Select, Checkbox, Radio Group, and Switch. Translate their value callbacks to field.onChange instead of registering hidden inputs.

• Bug Report demonstrates validation, submit status, and reset.
• Select, Checkbox Group, Radio Group, and Switch cover controlled primitives.
• Complex Form combines multiple field types without a form wrapper.
• Array Fields demonstrates dynamic fields with stable keys from useFieldArray.

• Keep a visible label associated with every control.
• Let React Hook Form focus the first invalid control after submit.
• Use live status text for successful asynchronous submissions.
• Reset both form state and any success message exposed by the feature.

The component building blocks are documented under Field, Input, and Select.