React Multi-Step Form Tutorial: Using Formik, Yup and material-ui

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!

----
Follow me on:

[danishdarren]

Finally found it ! was looking from days, , , Good work here.

[cseguino]

This was really huge! Advanced contents about formik and typescript, many thanks! Continue like this and you'll be a millionnaire soon :)

[washingtoncampos]

OMG, I just opened YouTube and saw you’re notification, I came faster than a rocket hahahaha great vídeo my friend, you’re always bringing the best content thank you 😊

[ReadWriteExercise]

Fantastic video and super helpful! This should be in the Formik docs. Also very very respectable that you tell people that you're just doing styling at 29:00 so if they don't care about then then they don't need to watch anymore 🙌

[josepadilla]

I'm having to make a form with these exact technologies- I'm unfamiliar with materialUI and Formik. Your video is VERY clear even to someone that isn't comfortable with some of the tech. I especially like how you first do a "naive" approach and then build into a more optimized version. I am looking at the code for each step and just think "wow that's genius and makes a lot of sense". Thanks!

[honeypatre]

OMG Buddy, this is the first video I saw of yours and after banging my head on wall for 2 days to be able to do a formik and stepper together and also fetching the values with validation, uhhh, I finally found this and it worked so so well for me, Thank you so much. Keep going, I instantly subscribed . Thanksss a

[bbqengineer]

I lack the ability to express how amazing you are because I've been rendered speechless from your genius! Thanks again Bruno!

[kevinrgt]

This helped me so much in a job interview. If I get that job I have you to thank. God bless you.

[bussenswe]

Wow, I came for some quick answers for but left as a better coder having a better grasp of creating custom wrappers and using types. Thank you!

[YuriiKratser]

you are the best teacher on Youtube coz you do your job with love.

[elkhayder]

YOU ARE A LIFE SAVER, I managed to use the same method on React Native. Thank you very much.

[rodolphobravo]

Finalmente, o mestre tá de volta!! Muito obrigado, vídeo incrível como sempre!

[devatreides]

That video is amazing! Thank you, it was a very beautiful explanation. The only thing I changed from your sample was the material UI component because I use Tailwind in my project so I had to add the ErrorMessage component to showing the validation messages with the TW style classes. But the logic is simple and clear to understand. Won a subscriber already!

[ashfaqeahmeds]

Thank you so much! Bruno Antunes. This is just what I had been looking for and breaking my head over! That's a lot of time saved for me!!

[martingomez]

Such valuable information should be thanked! Great work Bruno

[governordog]

Thank you Bruno, you are a very pleasant teacher to learn from.

[oleksandr]

I was not aware about YUP, thank you a lot! looks really good!

[_tonygaeta]

This was a great walkthrough. Thank you for making this! Quick question. How would you handle the multi-step form if every field resided in its own component? Would you import the FormkiStep into each component? Looking at the code, it seems pretty straightforward when all of the form fields reside in the same file, but I'm not sure how to tackle this when I'm dealing with 12+ form fields all encapsulated in their own components.

[Phyxu]

exactly what I needed, great vid. subscribed

[surabhisugandh]

Gosh! this was such a savior for me..thank you for taking the time to share :)