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

Formik keeps track of your form's state and then exposes it plus a few reusable methods and event handlers (handleChange, handleBlur, and handleSubmit) to your form via props. …

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 …

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.

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

To submit a form in Formik, you need to somehow fire off the provided handleSubmit(e) or submitForm prop. When you call either of these methods, Formik will execute the following …

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.

useField is a React hook used to thread Formik behaviors into arbitrary field components. It provides the greatest amount of flexibility for scenarios where Field is inappropriate.