Visit https://formik.org to get started with Formik.

What's New in v3.0? 🎉

Formik v3 is a major modernization for React 19+, delivering massive performance improvements and a cleaner API:

• ⚡ 95% Fewer Re-renders - Split context architecture eliminates unnecessary updates
• 📦 38% Smaller Bundle - Lodash removed, deprecated code eliminated (~45KB → ~28KB)
• 🚀 React 19 Features - Native support for useFormStatus, server actions, and progressive enhancement
• 🎯 100% Modern React - All functional components with hooks, no HOCs or class components
• ✨ Better TypeScript - Improved type inference and stricter types

Key Changes

New Features

• <SubmitButton> component with useFormStatus integration
• Server action support in <Form> for progressive enhancement
• Split context API: useFormikValues(), useFormikState(), useFormikMetadata(), useFormikMethods()
• React 19 ref support (no more innerRef)

Breaking Changes

• React 19+ required (was >=16.8.0)
• render prop removed (use children function)
• component prop removed (use as prop)
• withFormik() HOC removed (use useFormik() hook)
• connect() HOC removed (use useFormikContext())
• innerRef removed (use ref directly)

→ View the complete migration guide

Performance Comparison

| Metric | v2.4.9 | v3.0.0 | Improvement | |--------|--------|--------|-------------| | Re-renders per change | 10-50 | 1-2 | 95% reduction | | Bundle size (minified) | ~45KB | ~28KB | 38% smaller | | Initial render | 100ms | 60ms | 40% faster |

Quick Example

import { Formik, Form, Field, SubmitButton } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ email: '', password: '' }}
      onSubmit={async (values) => {
        await api.login(values);
      }}
    >
      <Form>
        <Field name="email" type="email" placeholder="Email" />
        <Field name="password" type="password" placeholder="Password" />
        <SubmitButton pendingText="Signing in...">
          Sign In
        </SubmitButton>
      </Form>
    </Formik>
  );
}

Organizations and projects using Formik

List of organizations and projects using Formik

Authors

• Jared Palmer @jaredpalmer
• Ian White @eonwhite

Contributing

This monorepo uses yarn, so to start you'll need the package manager installed.

To run E2E tests you'll also need Playwright set up, which can be done locally via npx playwright install. Afterward, run yarn start:app and in a separate tab run yarn e2e:ui to boot up the test runner.

When you're done with your changes, we use changesets to manage release notes. Run yarn changeset to autogenerate notes to be appended to your pull request.

Thank you!

Contributors

Formik is made with <3 thanks to these wonderful people (emoji key):

| Jared Palmer💬 💻 🎨 📖 💡 🤔 👀 ⚠️ | Ian White💬 🐛 💻 📖 🤔 👀 | Andrej Badin💬 🐛 📖 | Adam Howard💬 🐛 🤔 👀 | Vlad Shcherbin💬 🐛 🤔 | Brikou CARRE🐛 📖 | Sam Kvale🐛 💻 ⚠️ | | :---: | :---: | :---: | :---: | :---: | :---: | :---: | | Jon Tansey🐛 💻 | Tyler Martinez🐛 📖 | Tobias Lohse🐛 💻 |

This project follows the all-contributors specification. Contributions of any kind welcome!

Related

• TSDX - Zero-config CLI for TypeScript used by this repo. (Formik's Rollup configuration as a CLI)

Apache 2.0 License.