Formik Multi-Step Form with Material UI | React JS Forms Tutorial

In this video we explore how to create a multi-step form (wizard) in ReactJS using the Formik 2 library, Material UI, and Yup!

We'll cover the fundamentals of formik, how to create reusable fields using useField, how to perform validation with yup schemas, how to set up on submit logic, and of course how to split up a large form into multiple validated steps.

We will also be writing this React application using TypeScript. Let me know what you think!

[nicholasroman]

Marius, thank you for this in-depth and very professional tutorial. I was able to leverage what you showed me. Thank you.

[MrBaysah]

Thank you so much! this was the complete tutorial I was looking for.

[ceciliaserafini]

Marius, thank you a lot for this tutorial, it was very helpful! 🤗

[adarshrathi]

Bro, are you made multi step form in next js

[juhisahu]

Hi, don't know why my back button is submitting the form even I have passed type="button". Can you help me?

[dg]

Hi Marius, what would be the correct typing for the FormStep component instead of using "any"?

[jaggyjut]

Nice. What about adding logic between forms, eg: based on the input in a field on form1, the value of a field on form2 is selected.

[davic]

You can post the github repo? in my project, I can't move forward, but I folllow the tutorial step to step with the video

[igor.mijatovic-runner]

Hay Marius, thank you a lot for this nice tutorial. I have one question, if I want to add Language switcher to this page, how would you handle translations and current local?

[richardrapstine]

Is there any way to tie the keys in the yup object to the formik initial values? Or visa versa? That way you don't forget to add or remove something through redundancy.

[charlesclayton]

Hi, does this still work? been following up from 18:03 where you use field config to satisfy the props error however that does not fix the problem that I get.

[josesantillan]

Hello, Marius! amazing video as well. I was wondering in the case that I wanna have an input that upload files or images... How would you do, because the inputfields are only configurated to receive strings or numbers. Thanks!!

[jaredhattingh]

Hey Marius, thanks for your video! Any idea how to hide an entire step based on a value in a previous step? Can't seem to figure this out!

[TheKarstrasse]

Can I get the github link please. I am also building something similar with each step having it's own formik instance

[Allyourneedsmet]

Hello!, how can i wait for a submit on a form before moving to the next step?

[nubl]

Why is the snapshotting needed? It doesn't seem like it would do anything since once you start filling in fields the values are saved in formik's values property no?

[massiminogutierrezmantione]

I get Property 'stepName' does not exist on type 'IntrinsicAttributes & Props'. :\

[mufradmabni]

hi Marius, nice tutorial!
how about formik Multi-Step with FieldArray?

[FaVeShiva]

Do you have the source code for this project?

[vinodbandal]

Amazing thank for this.
How to create select like textfield.