Multi-Step form with react-hook-form

In this tutorial, you will learn how to create a multi-step form with react-hook-form.

We will take a big form and break it down into three separate steps. We will write some custom validation rules to improve the user experience.

After watching this tutorial you will have the necessary skills to create your own multi-step forms with react and react-hook-form.

00:00 Intro
00:25 Preparing the project
06:58 Adding react-hook-form to the project
18:25 Styling the form
23:32 Outro

[manavshah]

this is THE PERFECT video I was searching on yt. Your words are straight and clear and fits right into the mind. No fast forward, no timepass, just a perfect tutorial.

[juliocesarbenavente]

I can't believe it. You just saved me from being fired!

[jakeruth]

You make great videos man! Currently learning NextJS with tailwind and I love what you're doing. Keep it up!

[maungmaungtar]

Amazing tutorial with simple and step by step explanations on complex, multi step form, Thank you Austin.

[cecetheworld]

This video was SO incredibly helpful - thanks so much for this! I really appreciate the pace and the way you explained each step in such a succinct, clear way. You just saved me from a couple hours of potential headache, so thank you!!!

[alisequeira]

Nice tutorial! pretty straightforward, now I'm gonna try to separate each step in different files

[ikwuegbuanthony]

The best I've seen so far. Thanks Austin.

[Ricardoromero]

You can just pass the 'hidden' attribute to any html tag instead of passing a classname, resulting in cleaner syntax.
Amazing video. Pretty smart and simple implementation.

[le_travie]

Very well done and extremely simple not too many third party libraries. Thank you this is what I was looking for

[cristhianeresende]

This really helped me! Thank you, Austin!

[solotalemwa]

Jusst awesome! You are a life saver Austin! I will definitely checkout your tailwind video. Thanks again.

[mrastrogastro]

Thank you Austin! Exactly what I needed! Clean explanation! Cheers man!

[yerson]

With the latest react-hook-version v7, you don't need to add CSS, values persist in the form even if you change the step. Thanks, Austin for your tutorial! it helps me a lot

[benwasonga]

this is exactly what I needed.
Gracias

[altairtodescatto]

Nice, this just save me a lot of research on how to do it. thanks

[bluebill]

Thanks for producing this awesome tutorial!

[leandroalmeida]

Muito bom!, conseguir entender e aplicar a um projeto real, mesmo sem ouvir o áudio ou ver as legenda, obrigado!

[kgetgamingentertainmenttec]

Is there another way to hide the forms when we press next other than using tailwind css

[mohamedali]

thank a lot for thit tutorial, bro i have a question how will it be if you the sections in differents componet, i mean how will you acces to data in different form and submit them in a single, i'm really curious about knowing this

[braddeibert]

Trying to process what hiding parts of the form means for accessibility. Seems like keyboard users would still have the entire form read to them, even though the whole form is not visible at once for sighted users. Thoughts?