Build forms in React, without the tears Formik is the world's most popular open source form library for React and React Native.

My goal with Formik was to create a scalable, performant, form helper with a minimal API that does the really really annoying stuff, and leaves the rest up to you.

The Basics We’re going to start with the most verbose way of using Formik. While this may seem a bit long-winded, it’s important to see how Formik builds on itself so you have a full grasp of what’s …

Basic Example This example demonstrates how to use Formik in its most basic way.

Use this option to tell Formik to run validations on change events and change -related methods. More specifically, when either handleChange, setFieldValue, or setValues are called.

Formik supports synchronous and asynchronous form-level and field-level validation. Furthermore, it comes with baked-in support for schema-based form-level validation through Yup.

<Field /> will automagically hook up inputs to Formik. It uses the name attribute to match up with Formik state. <Field /> will default to an HTML <input /> element.

Form is a small wrapper around an HTML <form> element that automatically hooks into Formik's handleSubmit and handleReset. All other props are passed directly through to the DOM node.

The Formik source code is written in TypeScript, so you can rest easy that Formik's types will always be up-to-date. As a mental model, Formik's type signatures are very similar to React Router 4's <Route>.

Use this option to tell Formik to run validations on change events and change -related methods. More specifically, when either handleChange, setFieldValue, or setValues are called.