In this tutorial, we’ll build a multi-step form using React, Formik and Yup for validation.

In order to validate our forms, we will use Yup with Formik validationSchema.
We show how to validate fields that depend on other fields in different steps of the form.

In order to add a nice look and feel to our form, we will use Material-UI stepper component in order to display in which step we are at the moment.

We will use Formik with typescript.

---

Timeline:

• 00:00 Show the final multi-step form we will achieve at the end of the video
• 01:30 Show the repository with the code for people that want to follow along
• 01:44 Creating the form with all the fields, but without any steps
• 06:35 Add validation using Yup - we have a field validation depending on another field
• 09:45 Add multiple steps to the form
• 16:26 Create back and next button to “navigate” the steps
• 21:00 Add validationSchema property for each step, instead of at the Formik top level
• 29:15 Improve form look and feel (design) using Material-ui Box and Grid
• 32:50 Add Material-ui Stepper component to show in which step we are currently
• 38:04 Disable back and submit button while the form is submitting
• 42:13 Add a tick/check to the last step when submit is finished. Add a spinner to submit button while submitting.
• 47:40 Video conclusion
• 47:53 The End!

---

Github Repository: https://github.com/bmvantunes/youtube-2020-june-multi-step-form-formik

#react #javascript #web-development #programming #developer