Formik Validation Migration

Formik was built with first-class Yup support — its validationSchema prop expects a Yup schema object directly. This tight coupling means migrating to a different schema library requires an adapter layer. SchemaShift handles the schema conversion and flags where manual Formik integration work is needed.

Understanding the Challenge

Unlike React Hook Form's resolver architecture (which cleanly separates form handling from validation), Formik's validationSchema prop is designed around Yup's API. When you pass a schema to Formik, it calls schema.validate() and expects Yup's error format (ValidationError with a path property). This means you cannot simply swap in a Zod schema — you need an adapter.

Before & After

Here is how a Formik form looks before and after migrating the schema from Yup to Zod:

Before (Formik + Yup)

import { Formik, Form, Field } from 'formik';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  name: yup.string().min(2).required(),
});

<Formik
  validationSchema={schema}
  initialValues={{ email: '', name: '' }}
  onSubmit={handleSubmit}
>
  ...
</Formik>

After (Formik + Zod + Adapter)

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

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

<Formik
  validationSchema={toFormikValidationSchema(schema)}
  initialValues={{ email: '', name: '' }}
  onSubmit={handleSubmit}
>
  ...
</Formik>

The key difference is the toFormikValidationSchema() wrapper around the Zod schema. This adapter translates Zod's validation behavior and error format into what Formik expects.

Migration Strategy

The recommended approach is to migrate in two phases:

Phase 1: Migrate Schema Definitions

Use SchemaShift to convert all Yup schemas to Zod. SchemaShift adds TODO(schemashift) comments where Formik integration needs manual attention:

# Convert schemas, get TODO comments for Formik integration
schemashift migrate ./src -f yup -t zod

# Install the Formik adapter
npm install zod-formik-adapter

Phase 2: Update Formik Integration

After schema conversion, manually update each Formik component to wrap the new Zod schema with the adapter:

Import toFormikValidationSchema from zod-formik-adapter
Wrap each validationSchema prop: validationSchema={toFormikValidationSchema(schema)}
Test form submission and error display

Formik Maintenance Status

Formik is no longer actively maintained. If you are migrating schemas as part of a larger modernization effort, consider moving to React Hook Form which has a clean resolver pattern with first-class support for Zod, Yup, Joi, and Valibot. See the React Hook Form migration guide.

Adapter Options

Package	Approach	Notes
`zod-formik-adapter`	Wraps Zod schema with `toFormikValidationSchema()`	Most popular, maps Zod errors to Formik's expected format
Custom `validate` function	Use Formik's `validate` prop instead of `validationSchema`	No extra dependency; manually call `schema.safeParse()` and map errors
Keep Yup for Formik	Only migrate non-Formik schemas to Zod	Avoids adapter complexity but maintains two schema libraries

Edge Cases & Gotchas

validationSchema expects Yup API: Formik's validationSchema prop internally calls schema.validate(values, { abortEarly: false }) and expects a Yup ValidationError. Passing a raw Zod schema without an adapter will silently fail or throw unexpected errors.
Error path mapping: Yup uses dot-notation paths (address.street) for nested errors. The zod-formik-adapter handles this translation, but if you write a custom validate function, you need to flatten Zod's error format to match Formik's { [field]: message } structure.
Async validation: If your Yup schemas use async validators (.test() with async functions), remember that Formik will call validateAsync. The Zod adapter handles this, but ensure your custom validate function returns a Promise if using async Zod refinements.
Field-level validation: Formik supports both form-level (validationSchema) and field-level (validate prop on <Field>) validation. SchemaShift migrates form-level schemas; any field-level Yup validators need to be converted manually.

After Migration

Install zod-formik-adapter or implement a custom validate function
Wrap each validationSchema with toFormikValidationSchema()
Review all TODO(schemashift) comments in migrated files
Test form submission, validation errors, and error message display
Check nested field error paths render correctly
Consider migrating to React Hook Form for native Zod support

FAQ

Can I use Zod with Formik?

Yes, but Formik does not natively support Zod. You need an adapter package like zod-formik-adapter that provides toFormikValidationSchema() to bridge the two. Formik's validationSchema prop expects a Yup-compatible API, so you must wrap your Zod schema with an adapter that translates Zod's validation and error format.

Should I migrate Formik from Yup to Zod?

It depends on your goals. If you are standardizing on Zod across your project (for tRPC, Next.js Server Actions, etc.), migrating Formik schemas makes sense for consistency. However, Formik has native Yup support, so using Zod requires an adapter. Consider migrating to React Hook Form if you want first-class Zod support without adapters.

Does SchemaShift automatically update Formik integration?

SchemaShift migrates the schema definitions (Yup to Zod conversion) and adds TODO comments where Formik integration needs manual updates. Unlike React Hook Form which uses a clean resolver pattern, Formik's tight Yup coupling means the validationSchema prop and adapter setup require manual configuration.

Related Migration Guides

Get Started

Migrate your Formik schemas first, then update the integration layer. SchemaShift handles the schema conversion and flags where manual work is needed.

npm install -g schemashift-cli

The Yup to Zod migration is available on the free tier. View pricing for advanced features.