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: