When working with forms in React, you often need to connect your validation logic to your form library. React Hook Form is a popular library for managing form state and validation in React applications. It uses a concept known as the resolver pattern to let you plug in custom validation libraries, such as Zod. The resolver acts as a bridge, taking your form values and running them through your Zod schema, then returning any validation results or errors in a format that React Hook Form understands. This approach keeps your validation logic centralized and consistent, while letting you use Zod's powerful schema definitions and error messages directly in your form workflow.

To integrate Zod with React Hook Form, you start by defining your Zod schema as usual. Then, you use a resolver function that connects your schema to React Hook Form's validation system. Here's a step-by-step outline:

1. Define your Zod schema for the form fields;
2. Set up your form using React Hook Form's useForm hook, passing in the resolver that links to your Zod schema;
3. Handle form submission as normal, and display validation errors returned from Zod.

Suppose you want to validate a simple user registration form with an email and password. First, you would define your schema:

import { z } from "zod";

const schema = z.object({
  email: z.string().email({ message: "Invalid email format" }),
  password: z.string().min(6, { message: "Password must be at least 6 characters" }),
});

Next, you set up your form using React Hook Form. You need a resolver function that takes your Zod schema and adapts it for React Hook Form. There are libraries like @hookform/resolvers/zod that provide this out of the box, but the key idea is that the resolver runs your form values through the Zod schema and returns any errors in a format React Hook Form can use.

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

function RegistrationForm() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(schema),
  });

  const onSubmit = (data) => {
    // handle valid data
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("email")} placeholder="Email" />
      {errors.email && <span>{errors.email.message}</span>}
      <input {...register("password")} type="password" placeholder="Password" />
      {errors.password && <span>{errors.password.message}</span>}
      <button type="submit">Register</button>
    </form>
  );
}

With this integration, when a user submits the form, React Hook Form passes the form data to the resolver, which uses Zod to validate the values. If there are any issues, Zod's error messages are made available in the errors object, and you can display them next to the relevant fields. This setup allows you to keep all your validation logic in your Zod schema, while React Hook Form manages the rest of the form state and submission process.