--- title: "React TypeScript Hooks: Form Validation with Formik, Yup & Material-UI" description: "Learn how to handle form validations with JavaScript. Here we focus on React TypeScript: Hooks based components using Formik, Yup, and Material-UI." image: https://www.heady.io/hubfs/Assets%20June%202020/Blog%20Images/Group%20212@2x.png --- **NEW LAUNCH: **Weill Cornell Medicine's [Maya app](https://www.heady.io/work/maya) is now available for Android! ![Close Bar](https://www.heady.io/hubfs/Group%2040042.svg) [![Heady_Logo_Web-01 (1)](https://www.heady.io/hs-fs/hubfs/Heady_Logo_Web-01%20(1).png?width=130&height=78&name=Heady_Logo_Web-01%20(1).png) ](https://www.heady.io/) Because forms are an essential component in any application, it’s good that building forms are a fairly simple task. The easiest type of forms to handle is those with fewer total fields. [Software Engineering](https://www.heady.io/blog/tag/software-engineering) # React TypeScript Hooks: Form Validation with Formik, Yup & Material-UI ![Pratik Agashe](https://www.heady.io/hubfs/Assets%20June%202020/Blog%20Images/Icons%20-%20Profile@2x.png) Author ** Pratik Agashe ** Published On ** Jul 22, 2020 ** Share this article - - - - ![featured_group_20212](https://www.heady.io/hubfs/Assets%20June%202020/Blog%20Images/Group%20212@2x.png) Share this article - - - - ## Introduction Because forms are an essential component in any application, it’s good that building forms are a fairly simple task. The easiest type of forms to handle is those with fewer total fields. Things get a little trickier when we need to add form validation, but this can also be accomplished fairly easily with the right approach. There are many ways to handle form validations with JavaScript. In some approaches, once the user submits the form, they’ll not see all error messages once. That will be frustrating for the user. To avoid that, we prefer to highlight all required fields in the form at once. To enable such a set-up in React, there are many packages, which are explained with React class-based components. In this post, we will focus on **React TypeScript: Hooks based components.** For form validation, we will use the combination of **Formik and Yup**, and **Material-UI** for form elements. Because forms are an essential component in any application, it’s good that building forms are a fairly simple task. The easiest type of forms to handle is those with fewer total fields. Things get a little trickier when we need to add form validation, but this can also be accomplished fairly easily with the right approach. There are many ways to handle form validations with JavaScript. In some approaches, once the user submits the form, they’ll not see all error messages once. That will be frustrating for the user. To avoid that, we prefer to highlight all required fields in the form at once. To enable such a set-up in React, there are many packages, which are explained with React class-based components. In this post, we will focus on **React TypeScript: Hooks based components.** For form validation, we will use the combination of **Formik and Yup**, and **Material-UI** for form elements.   ## Formik In long forms, keeping track of values, errors, and visited fields, and then orchestrating validations, can be a hassle. That’s where **Formik** comes in. Using Formik means we will spend very little time managing states, handling errors, change handlers, etc. Instead, we can spend more time on logic.   ## Material-UI Formik provides the fields, but it is not the best tool for styling those fields. Material-UI is the solution to that. Material-UI will provide well designed, elegant input fields and structure, which saves us even more time. Check out the syntax for the radio button, checkbox, select, and more on [https://material-ui.com/](https://material-ui.com/).   ## Yup Formik has its validation property validate. But as more rules are added, the syntax and lines of code become very long—at times, it even becomes difficult to read. **Yup** is schema builder which will provide a clean and simple validation object which we will use for validationSchema, which is a Formik property. To have a look at more options for schema, visit [https://github.com/jquense/yup.](https://github.com/jquense/yup) --- Let’s get started by installing all the required packages. Here’s the command: `yarn add formik @material-ui yup @types/yup` Once all packages are installed, let’s import all the required components from the packages. `import { Grid, TextField, Button, makeStyles, createStyles, Theme, } from ‘@material-ui/core’ import { Formik, Form, FormikProps } from ‘formik’ import * as Yup from ‘yup’` makeStyles, createStyles, Theme are optional imports. I have used them here for inline styling. We will be using three properties from **Formik**, which are initialValues, onSubmit and validationSchema. For demo purposes, I have used a signup form. So under validationSchema we will have some rules, so that our form has all the required fields. onSubmit we will call createUser() to make an API call and reset the form. As mentioned above, **Formik** provides validate property, but to reduce complexity we are using **Yup**. Here’s a little comparison for that. Comparison between Formik validate and Yup validationSchema We will use FormikProps to render and bind form fields. This render will define the structure of our form. Though FormikProps have many props we will be using selected ones, like values, touched, errors, handleBlur, handleChange, isSubmitting. I have created an example code snippet with reference to the signup form and added a mock function createUser that will be triggered upon submission of the form. I’ve also added some additional states to handle form status success or errors. Without further ado, here’s the complete code for signup form using Formik, Yup, and Material-UI in React-TypeScript. `You can just copy-paste the full code snippet, import the component, and check on the browser. If you are not using TypeScript, you can get rid of interfaces.` Sign up form Once you run above code snippet, your output should look something like this. ![1_kxk4Y_gL453-QZYmw_9lhw](https://www.heady.io/hs-fs/hubfs/Assets%20June%202020/Blog%20Images/1_kxk4Y_gL453-QZYmw_9lhw.png?width=700&name=1_kxk4Y_gL453-QZYmw_9lhw.png)   ## Conclusion With the above approach, we don’t need to worry about handling values, errors, or touched fields. Those are all handled by Formik. The steps we should remember when reusing this form are: 1. Update the form field’s state in initialValues. 2. Update inputFields as per requirement. 3. Update name, id, values, etc. for each input field. 4. Add the function we want to trigger on form submit.   ### Resources  1. Formik: [https://jaredpalmer.com/formik/docs/](https://jaredpalmer.com/formik/docs/)overview 2. Material-UI: [https://material-ui.com/](https://material-ui.com/) 3. Yup: [https://github.com/jquense/yup](https://github.com/jquense/yup) That’s it. I hope this is helpful to you. Don’t hesitate to visit the links mentioned above to know more about **Formik, Yup,** and **Material-UI**. ![Group 212@2x](https://www.heady.io/hs-fs/hubfs/Assets%20June%202020/Blog%20Images/Group%20212@2x.png?width=570&height=490&name=Group%20212@2x.png) ## Interested in a career at Heady? Excellent! We are always looking for great talent. [ Learn More ](https://www.heady.io/careers) ![app-clips_1](https://www.heady.io/hubfs/Assets%20June%202020/Blog%20Images/app-clips_1.png) ![app-clips_2](https://www.heady.io/hubfs/Assets%20June%202020/Blog%20Images/app-clips_2.png) ## Interested in a career at Heady? Excellent! We are always looking for great talent. [ Learn More ](https://www.heady.io/careers) ###### LET'S TALK IT OUT. ## Figuring out your next step? We're here for you. ## Or drop us a line. [hello@heady.io](mailto:hello@heady.io) Our emails are *(almost)* as cool as our digital products. [![Heady_Logo_Web-01 (1)](https://www.heady.io/hs-fs/hubfs/Heady_Logo_Web-01%20(1).png?width=75&height=45&name=Heady_Logo_Web-01%20(1).png) ](https://www.heady.io/) Your phone will break before our apps do. ###### Brooklyn 20 Jay St Suite 1018 Brooklyn, NY 11201 ###### Mumbai WeWork Vikhroli Mumbai, India ###### Online - - - ###### Hit us up! [hello@heady.io](mailto:hello@heady.io) [646.480.0489](tel:6464800489) - - - ![Badges-24](https://www.heady.io/hubfs/Badges-24.png) ![Badges-24](https://www.heady.io/hubfs/Badges-24.png) ###### Brooklyn 20 Jay St Suite 1018 Brooklyn, NY 11201 ###### Mumbai WeWork Vikhroli Mumbai, India ###### Online - - - --- © 2026, Heady LLC. [About](https://www.heady.io/about)[Careers](https://www.heady.io/careers)[Newsroom](https://www.heady.io/newsroom)[Media Kit](https://www.heady.io/media-kit)[Privacy Policy](https://www.heady.io/privacy-policy)