Using the Formik Library for Forms with React

In this article, we're going to look at the 

 library which makes working with forms in React easier. It helps to store form values, validate input, and process form submit.

Let's start by adding the Formik to a project. This can be done with npm or yarn:

# add using npm
npm install formik
# or with yarn
yarn add formik

After that, we can import the Formik to our application and start using it:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field } from "formik";

const MyFormComponent = () => {
  const [submitData, setSubmitData] = useState("");

  return (
    <div>
      <div>You've submitted: {submitData}</div>
      <Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) => {
          setSubmitData(JSON.stringify(values));
          actions.setSubmitting(false);
        }}
      >
        {props => (
          <Form>
            <label htmlFor="name">Name</label>
            <Field name="name" />
            <label htmlFor="shipping">Shipping</label>
            <Field as="select" name="shipping">
              <option value="">Select...</option>
              <option value="Regular">Regular</option>
              <option value="Express">Express</option>
            </Field>
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

ReactDOM.render(<MyFormComponent />, document.getElementById("app"));

In this example, we've got a simple form that accepts a name and a shipping preference. For the 

 property that defines default values for form fields. Also we provide a handler for the 

 event. This function will run when a user submits a form. It receives the 

 object which contains fields' values and an additional 

 object with helper properties and functions. We're using the 

 helper function to notify the Formik that we're done with the submitting.

 component we specify the function that receives 

 component and returns a form to render. In 

 there is a set of helper functions and variables provided by Formik that we can use to define a behavior of the form.

 component provided by Formik instead of standard 

 components. These components bind the form and fields to the Formik logic so we don't need to manage fields manually.

This is the main scenario for building a form with Formik. There are additional ways of using Formik available: with higher-order component 

 React hook, and with standard React components such as 

. You may learn more about them on the official 

In most cases we'll need to submit a form data to some kind of a backend service and this should happen asynchronously. The Formik supports async functions for the 

 property. In this case, you don't need to call the 

at the end of a data submit. Instead, you can resolve your async function and the Formik will update the submitting state automatically.

import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field } from "formik";

const MyFormComponent = () => {
  const [submitData, setSubmitData] = useState("");

  return (
    <div>
      <div>You've submitted: {submitData}</div>
      <Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) => {
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              setSubmitData(JSON.stringify(values));
              resolve();
            }, 1000);
          });
        }}
      >
        {props => (
          <Form>
            <label htmlFor="name">Name</label>
            <Field name="name" />
            <label htmlFor="shipping">Shipping</label>
            <Field as="select" name="shipping">
              <option value="">Select...</option>
              <option value="Regular">Regular</option>
              <option value="Express">Express</option>
            </Field>
            <button type="submit" disabled={props.isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

ReactDOM.render(<MyFormComponent />, document.getElementById("app"));

In this example we're returning a Promise from the submit function and emulate a server call with the 

. The Formik will update the form state once we'll resolve the Promise. When rendering the form, we're using the 

 property to disable a submit button during the submit processing.

Validation of fields is a common task when working with forms. Let's make form fields mandatory and also require a name field to be at least 3 characters long:

import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field, ErrorMessage } from "formik";

const MyFormComponent = () => {
  const [submitData, setSubmitData] = useState("");

  return (
    <div>
      <div>You've submitted: {submitData}</div>
      <Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) => {
          setSubmitData(JSON.stringify(values));
          actions.setSubmitting(false);
        }}
        validate={values => {
          const errors = {};
          if (!values.name) {
            errors.name = "Required";
          } else if (values.name.trim().length < 3) {
            errors.name = "Name should be at least 3 characters long";
          }

          if (!values.shipping) {
            errors.shipping = "Required";
          }

          return errors;
        }}
      >
        {props => (
          <Form>
            <label htmlFor="name">Name</label>
            <Field name="name" />
            <ErrorMessage
              name="name"
              component="div"
              className="validation"
            />
            <label htmlFor="shipping">Shipping</label>
            <Field as="select" name="shipping">
              <option value="">Select...</option>
              <option value="Regular">Regular</option>
              <option value="Express">Express</option>
            </Field>
            <ErrorMessage
              name="shipping"
              component="div"
              className="validation"
            />
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

ReactDOM.render(<MyFormComponent />, document.getElementById("app"));

 component. This function receives values of fields and returns an object with validation errors. The submitting will occur only if an empty object is returned from the 

 components to display validation messages. For each 

 we specify the name of the field to watch, a wrapper component for a validation message (

We can simplify the validation by using the 

 validation library. The Formik provides an integration with this library via the 

To use Yup in our form we need to add it to a project first:

# add with npm
npm install yup
# or with yarn
yard add yup

After that, we can define the validation schema using the Yup. This schema can replace the 

import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const MyFormComponent = () => {
  const [submitData, setSubmitData] = useState("");

  return (
    <div>
      <div>You've submitted: {submitData}</div>
      <Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) => {
          setSubmitData(JSON.stringify(values));
          actions.setSubmitting(false);
        }}
        validationSchema={Yup.object({
          name: Yup.string()
            .min(3, "Name should be at least 3 characters long")
            .required("Required"),
          shipping: Yup.string().required("Required")
        })}
      >
        {props => (
          <Form>
            <label htmlFor="name">Name</label>
            <Field name="name" />
            <ErrorMessage
              name="name"
              component="div"
              className="validation"
            />
            <label htmlFor="shipping">Shipping</label>
            <Field as="select" name="shipping">
              <option value="">Select...</option>
              <option value="Regular">Regular</option>
              <option value="Express">Express</option>
            </Field>
            <ErrorMessage
              name="shipping"
              component="div"
              className="validation"
            />
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

ReactDOM.render(<MyFormComponent />, document.getElementById("app"));

 function from the previous example with the 

 and a Yup object. The object declares validation rules for form fields. Using declarative rules instead of the validation function makes it easier to define and maintain the validation logic. We're using the same 

 components to display validation errors.

 function in case if Yup does not cover all your validation requirements.

In this article, we've seen how Formik helps to simplify form management in React. Using this library we can easily keep fields' values, validate inputs, and process form submits.

<h1 data-node-type="titlePlaceholder">Using the Formik Library for Forms with React</h1><p>In this article, we're going to look at the <a href="https://jaredpalmer.com/formik/" rel="noopener noreferrer nofollow">Formik</a> library which makes working with forms in React easier. It helps to store form values, validate input, and process form submit.</p><h2>Adding Formik to project</h2><p>Let's start by adding the Formik to a project. This can be done with npm or yarn:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-e8hSt" id="cm-e8hSt"># add using npm
npm install formik
# or with yarn
yarn add formik</textarea><p>After that, we can import the Formik to our application and start using it:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-cavSR" id="cm-cavSR">import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field } from "formik";

const MyFormComponent = () =&gt; {
  const [submitData, setSubmitData] = useState("");

  return (
    &lt;div&gt;
      &lt;div&gt;You've submitted: {submitData}&lt;/div&gt;
      &lt;Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) =&gt; {
          setSubmitData(JSON.stringify(values));
          actions.setSubmitting(false);
        }}
      &gt;
        {props =&gt; (
          &lt;Form&gt;
            &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
            &lt;Field name="name" /&gt;
            &lt;label htmlFor="shipping"&gt;Shipping&lt;/label&gt;
            &lt;Field as="select" name="shipping"&gt;
              &lt;option value=""&gt;Select...&lt;/option&gt;
              &lt;option value="Regular"&gt;Regular&lt;/option&gt;
              &lt;option value="Express"&gt;Express&lt;/option&gt;
            &lt;/Field&gt;
            &lt;button type="submit"&gt;Submit&lt;/button&gt;
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    &lt;/div&gt;
  );
};

ReactDOM.render(&lt;MyFormComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fgu0m6&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fgu0m6&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fgu0m6%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example, we've got a simple form that accepts a name and a shipping preference. For the <code>Formik</code> component we specify the <code>initialValues</code> property that defines default values for form fields. Also we provide a handler for the <code>onSubmit</code> event. This function will run when a user submits a form. It receives the <code>values</code> object which contains fields' values and an additional <code>actions</code> object with helper properties and functions. We're using the <code>setSubmitting</code> helper function to notify the Formik that we're done with the submitting.</p><p>As the children for the <code>Formik</code> component we specify the function that receives <code>props</code> from the <code>Formik</code> component and returns a form to render. In <code>props</code> there is a set of helper functions and variables provided by Formik that we can use to define a behavior of the form.</p><p>We're using the <code>&lt;Form&gt;</code> component provided by Formik instead of standard <code>&lt;form&gt;</code> and and the <code>&lt;Field&gt;</code> component instead of standard <code>&lt;input&gt;</code> and <code>&lt;select&gt;</code> components. These components bind the form and fields to the Formik logic so we don't need to manage fields manually.</p><p>This is the main scenario for building a form with Formik. There are additional ways of using Formik available: with higher-order component <a href="https://jaredpalmer.com/formik/docs/api/withFormik" rel="noopener noreferrer nofollow">withFormik,</a> with <a href="https://jaredpalmer.com/formik/docs/api/useFormik" rel="noopener noreferrer nofollow">useFormik</a> React hook, and with standard React components such as <code>&lt;form&gt;</code> and <code>&lt;input&gt;</code>. You may learn more about them on the official <a href="https://jaredpalmer.com/formik/docs/tutorial" rel="noopener noreferrer nofollow">Formik site.</a></p><h2>Processing async form submit</h2><p>In most cases we'll need to submit a form data to some kind of a backend service and this should happen asynchronously. The Formik supports async functions for the <code>onSubmit</code> property. In this case, you don't need to call the <code>setSubmitting(false)</code>at the end of a data submit. Instead, you can resolve your async function and the Formik will update the submitting state automatically.</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-1ah6h" id="cm-1ah6h">import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field } from "formik";

const MyFormComponent = () =&gt; {
  const [submitData, setSubmitData] = useState("");

  return (
    &lt;div&gt;
      &lt;div&gt;You've submitted: {submitData}&lt;/div&gt;
      &lt;Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) =&gt; {
          return new Promise((resolve, reject) =&gt; {
            setTimeout(() =&gt; {
              setSubmitData(JSON.stringify(values));
              resolve();
            }, 1000);
          });
        }}
      &gt;
        {props =&gt; (
          &lt;Form&gt;
            &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
            &lt;Field name="name" /&gt;
            &lt;label htmlFor="shipping"&gt;Shipping&lt;/label&gt;
            &lt;Field as="select" name="shipping"&gt;
              &lt;option value=""&gt;Select...&lt;/option&gt;
              &lt;option value="Regular"&gt;Regular&lt;/option&gt;
              &lt;option value="Express"&gt;Express&lt;/option&gt;
            &lt;/Field&gt;
            &lt;button type="submit" disabled={props.isSubmitting}&gt;
              Submit
            &lt;/button&gt;
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    &lt;/div&gt;
  );
};

ReactDOM.render(&lt;MyFormComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fc345b&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fc345b&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fc345b%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>In this example we're returning a Promise from the submit function and emulate a server call with the <code>setTimeout</code>. The Formik will update the form state once we'll resolve the Promise. When rendering the form, we're using the <code>props.isSubmitting</code> property to disable a submit button during the submit processing.</p><h2>Adding form validation</h2><p>Validation of fields is a common task when working with forms. Let's make form fields mandatory and also require a name field to be at least 3 characters long:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-aLNDA" id="cm-aLNDA">import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field, ErrorMessage } from "formik";

const MyFormComponent = () =&gt; {
  const [submitData, setSubmitData] = useState("");

  return (
    &lt;div&gt;
      &lt;div&gt;You've submitted: {submitData}&lt;/div&gt;
      &lt;Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) =&gt; {
          setSubmitData(JSON.stringify(values));
          actions.setSubmitting(false);
        }}
        validate={values =&gt; {
          const errors = {};
          if (!values.name) {
            errors.name = "Required";
          } else if (values.name.trim().length &lt; 3) {
            errors.name = "Name should be at least 3 characters long";
          }

          if (!values.shipping) {
            errors.shipping = "Required";
          }

          return errors;
        }}
      &gt;
        {props =&gt; (
          &lt;Form&gt;
            &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
            &lt;Field name="name" /&gt;
            &lt;ErrorMessage
              name="name"
              component="div"
              className="validation"
            /&gt;
            &lt;label htmlFor="shipping"&gt;Shipping&lt;/label&gt;
            &lt;Field as="select" name="shipping"&gt;
              &lt;option value=""&gt;Select...&lt;/option&gt;
              &lt;option value="Regular"&gt;Regular&lt;/option&gt;
              &lt;option value="Express"&gt;Express&lt;/option&gt;
            &lt;/Field&gt;
            &lt;ErrorMessage
              name="shipping"
              component="div"
              className="validation"
            /&gt;
            &lt;button type="submit"&gt;Submit&lt;/button&gt;
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    &lt;/div&gt;
  );
};

ReactDOM.render(&lt;MyFormComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fuknnj&amp;url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fuknnj&amp;image=https%3A%2F%2Fcodesandbox.io%2Fapi%2Fv1%2Fsandboxes%2Fuknnj%2Fscreenshot.png&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;type=text%2Fhtml&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We've added the <code>validate</code> function in the <code>Formik</code> component. This function receives values of fields and returns an object with validation errors. The submitting will occur only if an empty object is returned from the <code>validate</code> function.</p><p>In the form we're using the <code>ErrorMessage</code> components to display validation messages. For each <code>ErrorMessage</code> we specify the name of the field to watch, a wrapper component for a validation message (<code>&lt;div&gt;</code> in our case), and a CSS class to add.</p><h2>Form validation with Yup</h2><p>We can simplify the validation by using the <a href="https://github.com/jquense/yup" rel="noopener noreferrer nofollow">Yup</a> validation library. The Formik provides an integration with this library via the <code>validationSchema</code> property.</p><p>To use Yup in our form we need to add it to a project first:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-3Ypf6" id="cm-3Ypf6"># add with npm
npm install yup
# or with yarn
yard add yup</textarea><p>After that, we can define the validation schema using the Yup. This schema can replace the <code>validate</code> function that we've previously used:</p><textarea data-iscodemirror="true" data-mode="text/jsx" data-uniqueid="cm-hNVuP" id="cm-hNVuP">import React, { useState } from "react";
import ReactDOM from "react-dom";

import { Formik, Form, Field, ErrorMessage } from "formik";
import * as Yup from "yup";

const MyFormComponent = () =&gt; {
  const [submitData, setSubmitData] = useState("");

  return (
    &lt;div&gt;
      &lt;div&gt;You've submitted: {submitData}&lt;/div&gt;
      &lt;Formik
        initialValues={{ name: "", shipping: "" }}
        onSubmit={(values, actions) =&gt; {
          setSubmitData(JSON.stringify(values));
          actions.setSubmitting(false);
        }}
        validationSchema={Yup.object({
          name: Yup.string()
            .min(3, "Name should be at least 3 characters long")
            .required("Required"),
          shipping: Yup.string().required("Required")
        })}
      &gt;
        {props =&gt; (
          &lt;Form&gt;
            &lt;label htmlFor="name"&gt;Name&lt;/label&gt;
            &lt;Field name="name" /&gt;
            &lt;ErrorMessage
              name="name"
              component="div"
              className="validation"
            /&gt;
            &lt;label htmlFor="shipping"&gt;Shipping&lt;/label&gt;
            &lt;Field as="select" name="shipping"&gt;
              &lt;option value=""&gt;Select...&lt;/option&gt;
              &lt;option value="Regular"&gt;Regular&lt;/option&gt;
              &lt;option value="Express"&gt;Express&lt;/option&gt;
            &lt;/Field&gt;
            &lt;ErrorMessage
              name="shipping"
              component="div"
              className="validation"
            /&gt;
            &lt;button type="submit"&gt;Submit&lt;/button&gt;
          &lt;/Form&gt;
        )}
      &lt;/Formik&gt;
    &lt;/div&gt;
  );
};

ReactDOM.render(&lt;MyFormComponent /&gt;, document.getElementById("app"));</textarea><div data-embed="true" contenteditable="false" class="embeddedIframeWrapper embed-container editing embed-position-inline"><iframe src="//cdn.embedly.com/widgets/media.html?url=https%3A%2F%2Fcodesandbox.io%2Fs%2Fv493v&amp;src=https%3A%2F%2Fcodesandbox.io%2Fembed%2Fv493v&amp;type=text%2Fhtml&amp;key=c4a3d56b91fa4b36945f1953875308ab&amp;schema=codesandbox" frameborder="0" sandbox="allow-scripts allow-forms allow-same-origin"></iframe></div><p>We've replaced the <code>validate</code> function from the previous example with the <code>validationSchema</code> and a Yup object. The object declares validation rules for form fields. Using declarative rules instead of the validation function makes it easier to define and maintain the validation logic. We're using the same <code>ErrorMessage</code> components to display validation errors.</p><p>You can have both the <code>validationSchema</code> with Yup and the <code>validate</code> function in case if Yup does not cover all your validation requirements.</p><h2>Summary</h2><p>In this article, we've seen how Formik helps to simplify form management in React. Using this library we can easily keep fields' values, validate inputs, and process form submits.</p>

AUTHOR

Dmitry Rogozhny

In this article, we're going to look at the Formik library which makes working with forms in React easier. It helps to store form values, validate input, and process form submit. Let's start by adding the Formik to a project. This can be done with npm or yarn: After that, we can import the Formik…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Using the Formik Library for Forms with React

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript