Formik

Formik is a React library for managing form state, validation, and submission without hand-rolling controlled-input wiring for every field. It centralizes values, touched state, and errors in a single store accessible via hooks (useFormik, useField) or the <Formik> render-prop/component API, so forms of any size stay declarative instead of accumulating dozens of individual useState calls.

Validation can be handled with a plain validation function or, more commonly, a Yup schema passed via validationSchema, giving type-safe, declarative validation rules that Formik automatically maps to per-field error messages. <Field>, <FieldArray>, <Form>, and <ErrorMessage> components cover the common cases of text inputs, dynamic list fields, form submission, and error rendering respectively.

What You Get

• useFormik/<Formik> - the core hook and component managing values, errors, touched state, and submission handling for an entire form
• <Field>/useField - per-field bindings that connect an input to Formik’s state without manual onChange/value wiring
• <FieldArray> - manages dynamic, repeatable field groups (e.g. a list of phone numbers or line items) with add/remove/reorder helpers
• Built-in Yup schema validation support via validationSchema, plus support for a custom validate function for non-Yup validation
• withFormik higher-order component for class-component codebases that predate hooks

Common Use Cases

• Multi-field signup, login, or checkout forms needing per-field validation messages and submit-state handling (isSubmitting, isValid)
• Dynamic forms where users add/remove repeated groups of fields (e.g. multiple addresses or line items) via FieldArray
• Forms requiring schema-based validation shared between client and server logic, using a single Yup schema as the source of truth
• Wizard-style multi-step forms that need to preserve values and validation state as the user moves between steps

Under The Hood

Architecture The core lives in packages/formik/src/Formik.tsx (1219 lines), a single component/hook implementation built around a reducer-style internal state object (values, errors, touched, isSubmitting, isValidating) exposed to descendants through FormikContext; Field.tsx and FastField.tsx connect individual inputs to that context via useField, while FieldArray.tsx (392 lines) layers array-specific mutation helpers (push/remove/insert/swap/move) on top of the same context using an internal array-helpers class. Tech Stack A TypeScript-first monorepo (94% TS) managed with Turborepo/yarn workspaces, containing the formik core package and a separate formik-native package for React Native; validation integrates with Yup as an optional peer, and the build targets both CJS and ESM outputs. Code Quality Test coverage is deep and long-standing: packages/formik/test/ has dedicated suites for Formik.test.tsx, Field.test.tsx, FieldArray.test.tsx, withFormik.test.tsx, ErrorMessage.test.tsx, utils.test.tsx, plus a types.test.tsx file specifically asserting the public TypeScript types compile correctly — an unusually rigorous check for a UI library. E2E coverage is added via Playwright (playwright.config.ts, e2e/ directory) on top of the unit suite. API Design The API balances hooks (useFormik, useField) for modern function components against a still-supported withFormik HOC and render-prop <Formik> component for legacy code, which does add surface area to learn, but the common path (<Formik> + <Field> + validationSchema) requires very little boilerplate to get a validated form working, which explains its dominant adoption in the React ecosystem despite competition from newer, smaller libraries like react-hook-form.