Creating React Forms with Formik

How to speed up your React form development with Formik.

Creating forms in a React app is a real pain. We need to handle all the value changes ourselves. For inputs text boxes, we need to get the value and update the state with our own code. For other form controls like checkboxes and radio buttons, it’s even harder.

One library that helps us make our lives easier is Formik . In this article, we’ll look at how to use Formik in our React app to create forms.

“Uncommon thinkers reuse what common thinkers refuse.”
— J. R. D. Tata

Regardless of which library you use to build your forms, make sure you publish your UI components to a cloud component hub like Bit.dev. Use it to share, document and organize your reusable code. It doesn't have to be a complete ‘library project’ — you can publish individual components from any codebase, whenever you feel like it.

Just like using form libraries, it’s another step towards a faster and more pleasant development, for you and your team.

Exploring published React components on Bit.dev

Getting Started

To get started, we first have to install the Formik NPM package.

We do that by running:

npm i formik

Next, we can start creating our form.

To do that, we include the Formik component in our app, which we can use by nesting our form control components inside it.

Then the state will update without us writing much code.

To create a simple form, we can write:

In the code above, we added the Formik component, which has various props.

The initialValue prop lets us specify the initial values of the form fields.

The validate prop lets us specify validation rules.

It’s a function that takes the values and let us return an errors object with the key being the key of the form value of the value being the message.

onSubmit is a prop that takes a function when we click Submit.

All we do is show an alert box with the values that are inputted to keep things simple for this example.

The setSubmitting prop is a function that's called to let Formik know if we're submitting or not.

If we’re done, then we pass in false to setSubmitting as we did above.

The function we pass into the onSubmit prop won't be called until all the form fields have valid data.

Inside the Formik component, we have a function with an object parameter with lots of properties.

And we return our form element, which has 2 input text controls.

The handleChange parameter has the change handler that we need to handle any form value changes.

The handleSubmit has our on-submit handler which we defined in the onSubmit prop.

handleBlur has the onBlur handler for the form element.

We display the error objects after the input control is touched and the error object is populated.

The isSubmitting is also a useful parameter that lets us know whether the form is being submitted or not.

If it’s being submitted, then we display the Submit button so that we can’t submit again.

values has the form value which we can set as the value of the value prop of our input elements.

Making Things Simpler.

Fortunately, we don’t have to write all that code explicitly every time.

Formik provides us with the Form , Field , and ErrorMessage components to let us build forms, add form fields, and display error messages respectively.

We can simplify our previous example by writing:

This component is at https://bit.dev/jauyeunggithub/formik-simple/app

We simplified it greatly with the Form , Field , and ErrorMessage components that come with Formik.

The fields are in the Form component.

The Field component has our form inputs.

And the ErrorMessage components have the messages we're displayed.

The only left in the function that we passed inside the Formik component is the isSubmitting property from the parameter.

We still used it to set the disabled prop of the button as we did with the previous example.

Hooks API

Like most popular React libraries, Formik also comes with a hook-based API.

Formik has the useFormik hooks, which returns a function that we can use in our own forms for handling form value changes, displaying error messages, and form submission.

We can use the useFormik hook as follows:

This component is at https://bit.dev/jauyeunggithub/formik-hooks/app

We separated out the validate function by moving it outside the App component.

The validation mechanism is the same. We check the value of the form fields that are specified as keys of the initialValue property.

In App , we called the useFormik hook by passing an object with the initialValues property, our validate function, and our onSubmit function, which will be called if all the inputted values are valid.

It returns the formik object, which has the handleSubmit , handleChange , errors and values properties, which are all the same as the previous examples.

The benefit of using useFormik is that we can move our validate outside of our component.

Also, the return methods and properties can be used however we like in our forms.

This means that we don’t have to write out everything explicitly and we don’t have to use the components that are built into Formik, which are quite restrictive.

We have clean syntax and flexible at the same time with the hooks API.

Conclusion

Formik is an easy to use library that lets us add forms to a React with form validation without the hassle of handling form values ourselves.

Also, it will return form validation errors automatically so that we don’t have to deal with them ourselves.

We just put the ones that are returned wherever we like.

The hooks that come with Formik give us more flexibility with how we can create our forms in a React app.