zod-formik-adapter

You can install the library using either npm or yarn to enable Zod schema validation within your Formik forms.

# npm
$ npm install zod-formik-adapter

# yarn
$ yarn add zod-formik-adapter

To use a Zod schema with Formik's validationSchema prop (which is compatible with Yup-style validation), use the toFormikValidationSchema function. This is the recommended way to integrate Zod with Formik's built-in validation logic.

import { z } from 'zod';
import { Formik } from 'formik';
import { toFormikValidationSchema } from 'zod-formik-adapter';

const Schema = z.object({
  name: z.string(),
  age: z.number(),
});

const Component = () => (
  <Formik
    validationSchema={toFormikValidationSchema(Schema)}
  >
    {/* ... */}
  </Formik>
);

If you prefer to use Formik's validate prop instead of validationSchema, use the toFormikValidate function. This converts a Zod schema into a function that Formik calls to perform validation.

import { z } from 'zod';
import { Formik } from 'formik';
import { toFormikValidate } from 'zod-formik-adapter';

const Schema = z.object({
  name: z.string(),
  age: z.number(),
});

const Component = () => (
  <Formik
    validate={toFormikValidate(Schema)}
  >
    {/* ... */}
  </Formik>
);

Use toFormikValidate to wrap a Zod schema for use with Formik's validate prop. This function returns an asynchronous function that, when called with form values, returns an object of errors if validation fails. The returned error object uses dot-notation strings for keys (e.g., "user.email") and maps them to their respective error messages.

import { toFormikValidate } from 'zod-formik-adapter';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
});

// Use this in your Formik component
const validate = toFormikValidate(schema);

// <Formik validate={validate} ... />

Use toFormikValidationSchema to wrap a Zod schema so it can be passed directly to Formik's validationSchema prop. This function returns an object with an asynchronous validate method. If validation fails, it throws a ValidationError containing an inner array of errors, where each error includes a path (joined by dots) and a message.

import { toFormikValidationSchema } from 'zod-formik-adapter';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email(),
});

// Use this in your Formik component
const validationSchema = toFormikValidationSchema(schema);

// <Formik validationSchema={validationSchema} ... />

When using toFormikValidationSchema, validation failures throw a ValidationError. You can catch this error and inspect the inner property to access specific field errors. Each item in the inner array contains:

• path: A string representing the path to the field (e.g., "address.street").
• message: The error message provided by Zod.

import { ValidationError } from 'zod-formik-adapter';

try {
  await validationSchema.validate(formData);
} catch (err) {
  if (err instanceof ValidationError) {
    console.log(err.inner); // Array<{ path: string; message: string }>
  }
}