Building Forms with Zod and React Hook Form

Forms are the most common source of bugs in web applications. Type mismatches, missing validation, inconsistent error display — the list goes on.

The Stack

- **Zod** for schema definition and validation - **React Hook Form** for performant form state management - **@hookform/resolvers** to connect them together

Define Once, Validate Everywhere

// src/lib/schemas.ts
export const loginSchema = z.object({
  email: z.string().email("Please enter a valid email"),
  password: z.string().min(8, "Password must be at least 8 characters"),
});

The same schema validates on the client (React Hook Form) and can be reused on the server (API routes, server actions).

Wire It Up

const form = useForm<LoginValues>({
  resolver: zodResolver(loginSchema),
  defaultValues: { email: "", password: "" },
});

That's it. Type-safe, validated, and the error messages come from your Zod schema.