In this tutorial we will talk about the basics of Formik starting from installing and importing the library to structuring a Formik form, but before diving deeper into subject let's have a brief overview of the library.

What is Formik ?

Forms are used to collect user data on web applications, still sometimes we need to collect large amounts of data which may result in a large form with several fields and validation control. And this can be a pain for both users and developers. That's how Formik was born, and from the very beginning they made it clear :

Build forms in React, without the tears 😭 - Jared Palmer, Creator of Formik.

Basically Formik makes forms in React easy by :

  • Managing your form's state
  • Providing validation on all of your fields.
  • Handling form submission

The Basics

You can simply add Formik as a dependency to your project: using npm / yarn as follows:

yarn add formik

In this tutorial we're going to start with the detailed way of using Formik, because after all it's important to see how Formik builds so we can have a full look of what's possible and how it works.

Let's create a simple form to understand the basics, we will start with a user info form for a web site. For now our form will have just one username field. Using Formik, it's easy :

Using the useFormik() hook we will pass to our form :

  • the initialValues
  • the submission function onSubmit

useFormik() will return a collection of helper methods, for now we will use: :

  • Submission handler : handleSubmit
  • A change handler to pass to each <input>, <select>, or <textarea> : handleChange
  • the current form values : values

In the exemple above, we can't tell the benefits of using useFormik() as we only have one input. So let's add two more inputs: one for the user's email and the other for the full name, which we'll store as email and fullName in the form.

Let's take a look at our new code, you'll notice that :

  • We used the same change handler handleChange for all the inputs
  • We pass the name attribute that matches the property we defined in initialValues, so that Formik can handle their state for you.
  • We can get access to the field's value using formik.values ( example formik.values.email )

Validation

For now, our form doesn't tell the users which fields are required. To do so we can use the browser's built-in HTML input validation by adding  required prop to each of our inputs, we can also add a pattern prop for regex validation for each of these inputs. This is great for beginners but HTML validation has its limitations. First, it only works in the browser! So we can't use it for example with a framework like React Native. Second, it's very hard to show custom error messages and finally it's very janky.

As mentioned earlier, Formik keeps track of not only your form's values, but also its error messages and validation.

Let's add a custom validation function validate to the useFormik() hook, this function will produce an error if an error exists ( the error object will be matching shape with our  values/initialValues )

Conclusion

There is a lot more to learn about Formik. This tutorial is just the start and we barely began. In this tutorial we saw how to create your first form using Formik and how to use custom validation functions for Validation.