const userSchema = z.object({ name: z.string().min(1), email: z.string().email(), role: z.string().optional(), });

type UserForm = z.infer;


## 2. Initialize useForm

Pass the schema to `zodResolver` and type the form with the inferred type.

```typescript
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";

const {
  control,
  handleSubmit,
  reset,
  formState: { errors },
} = useForm<UserForm>({ resolver: zodResolver(userSchema) });

Key destructured values:

Value	Purpose
`control`	Passed to `<Controller>` to connect inputs
`handleSubmit`	Wraps your submit handler; validates before calling it
`reset`	Clears the form or populates it with new values
`errors`	Object with validation errors per field

3. Render Fields with Controller

Use <Controller> to connect any input — native HTML or a UI library component — to the form.

import { Controller } from "react-hook-form";

<Controller
  name="name"
  control={control}
  render={({ field }) => <input {...field} />}
/>

The field object contains value, onChange, onBlur, and ref. Spread it directly onto the input.

4. Display Validation Errors

Check errors.fieldName to conditionally show error messages.

<div>
  <Controller
    name="email"
    control={control}
    render={({ field }) => <input type="email" {...field} />}
  />
  {errors.email && <span>{errors.email.message}</span>}
</div>

For UI libraries that accept validateStatus / help props (e.g. Ant Design):

<Form.Item
  validateStatus={errors.email ? "error" : ""}
  help={errors.email?.message}
>
  <Controller name="email" control={control} render={({ field }) => <Input {...field} />} />
</Form.Item>

5. Handle Submission

Pass your handler to handleSubmit. The handler receives fully-typed, validated values.

const onSubmit = (values: UserForm) => {
  // values is typed and validated — safe to use directly
  saveUser(values);
};

// Wire to a button or form element:
<button onClick={handleSubmit(onSubmit)}>Save</button>
// or
<form onSubmit={handleSubmit(onSubmit)}>...</form>

6. Reset and Pre-populate

Call reset() to clear the form, or reset(values) to fill it with existing data (useful for edit forms).

// Clear on cancel
const handleCancel = () => {
  reset();
  onClose();
};

// Pre-populate when editing existing data
useEffect(() => {
  if (user) {
    reset({
      name: user.name,
      email: user.email,
      role: user.role,
    });
  }
}, [user, reset]);

Complete Example

A generic edit modal combining all the pieces:

import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect } from "react";
import { Controller, useForm } from "react-hook-form";
import { z } from "zod";

const userSchema = z.object({
  name: z.string().min(1, "Required"),
  email: z.string().email("Invalid email"),
});

type UserForm = z.infer<typeof userSchema>;

type Props = {
  user: { name: string; email: string } | null;
  onSave: (values: UserForm) => void;
  onClose: () => void;
};

export function EditUserModal({ user, onSave, onClose }: Props) {
  const {
    control,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<UserForm>({ resolver: zodResolver(userSchema) });

  useEffect(() => {
    if (user) reset({ name: user.name, email: user.email });
  }, [user, reset]);

  const onSubmit = (values: UserForm) => {
    onSave(values);
    reset();
    onClose();
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <Controller
          name="name"
          control={control}
          render={({ field }) => <input placeholder="Name" {...field} />}
        />
        {errors.name && <span>{errors.name.message}</span>}
      </div>

      <div>
        <Controller
          name="email"
          control={control}
          render={({ field }) => <input placeholder="Email" {...field} />}
        />
        {errors.email && <span>{errors.email.message}</span>}
      </div>

      <button type="button" onClick={() => { reset(); onClose(); }}>Cancel</button>
      <button type="submit">Save</button>
    </form>
  );
}

Tips

Co-locate schema and type — define schema and type Form = z.infer<typeof schema> in the same file as (or a utils file imported by) the component.
Array fields — use z.array(z.string()) in the schema; the Controller render can be a multi-select or tag input.
Optional fields — use .optional() or .nullable() in Zod; react-hook-form will pass undefined/null through without triggering required errors.
Async validation — Zod's .refine() supports async predicates; react-hook-form awaits them automatically.

react-hook-form

React Hook Form + Zod

Installation

1. Define a Zod Schema and Infer the Type