When building forms in React, you often need a way to manage form state and handle validation. Formik is a popular form management library that helps you keep track of form data, manage field values, and handle form submissions. Formik's validation workflow is flexible: you can use built-in validation, write custom validation logic, or plug in external validation libraries. By default, Formik allows you to provide a validate function for custom synchronous validation or a validationSchema for schema-based validation using libraries like Yup. However, if you want to use Zod for schema validation in Formik, you typically use the validate function, since Formik does not have built-in support for Zod.

To use Zod with Formik, you define a Zod schema that describes the shape and rules for your form data. Inside Formik, you supply a validate function that takes the current form values and returns an object of errors. In this function, you call your Zod schema's safeParse method with the form values. If Zod finds validation issues, you translate those issues into a plain object with error messages keyed by field name—this is the format Formik expects for displaying errors in the UI. This approach lets you leverage Zod's robust schema validation within Formik's workflow.

Consider a simple sign-up form with fields for email and password. First, define a Zod schema that sets the validation rules for these fields. Then, create a Formik form and pass a validate function that uses the Zod schema. Here is how you can integrate Zod with Formik:

import React from "react";
import { useFormik } from "formik";
import { z } from "zod";

// Define your Zod schema
const SignupSchema = z.object({
  email: z.string().email("Invalid email address"),
  password: z.string().min(6, "Password must be at least 6 characters"),
});

// Create the Formik form component
function SignupForm() {
  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validate: (values) => {
      const result = SignupSchema.safeParse(values);
      if (result.success) {
        return {};
      }
      // Convert Zod errors to Formik error format
      const errors = {};
      result.error.errors.forEach((err) => {
        if (err.path.length > 0) {
          errors[err.path[0]] = err.message;
        }
      });
      return errors;
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.errors.email && <div>{formik.errors.email}</div>}

      <label htmlFor="password">Password</label>
      <input
        id="password"
        name="password"
        type="password"
        onChange={formik.handleChange}
        value={formik.values.password}
      />
      {formik.errors.password && <div>{formik.errors.password}</div>}

      <button type="submit">Sign Up</button>
    </form>
  );
}

In this example, the Zod schema is used inside the validate function. If the form values do not pass validation, the errors are mapped to Formik's expected format so that error messages can be displayed next to the relevant fields. This pattern keeps your validation logic clear and maintainable while fully leveraging Zod's power.