Multi-Step form with react-hook-form

there are millions of files on github

u change only text and u have 2 different buttons thats .....

Hi Austin, sorry for another question! When I move to the next step it seems to populate the next inputs with the previous values. Have you ever come across that behaviour?

Only half way through but loving the video. Out of interest, do you need to use a ref to register the input? I've been using {...register('name', {required: true})} as an attribute and it seems to be working ok?

thanks man

This will work with zod? I tried it with zod but i cannot get to step 2 cause my step 2 fields also validated when clicking next to step 2.

Your repo is outdated

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

Nice tutorial mate. Can you do the same with Next.js and the next router. So each step of the form will be a new route?!?

Love this video!

Question: can we use yupResolver with this strategy?

This really helped me! Thank you, Austin!

Thank You Sir

It was awesome!! Thank you so much!

Just one question, what does the "null, 2" mean?

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

Thank you dude , it's awesome

Thanks bro!!!

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

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

Thanks for this tutorial! There is one inaccuracy though. When you play around with the forward and back buttons at some point the form gets submitted too early. When you go through all the steps and check the checkboxes then go back and then try to go to the next step again the form actually gets submitted. Any idea on how to solve this?

Great multi step form tutorial. 👍👋❤️😍

Thank you.

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

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

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?

great work man !

Please don't make render functions which you then call inside of your page render. That's an anti-pattern; use react components. {formStep > 2 && <NextButton />}

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

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

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.

Hi Austin,
there is a big mistake in your code!
If I jump from the 3rd step again to the 1st step - then afterwards the value in the 2nd step is missing!
What is the reason for this?
Best regards
Markus

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.

Would love to see the same video with TS + React Hook Form v7 + Material UI + Tailwind :)

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!!!

this is exactly what I needed.
Gracias

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

I'm having a problem with taking a multiple choice test with multiple questions in sections and don't know how to solve it? can you help me with the solution?

If it's a series of multiple choice questions, how should we solve it?

Cool. What about adding logic between the forms?

I think there is a v7 update change a lot =) can you redo a video to keep it easy to follow?

Excellent. Thanks a ton. Subscribed.

Thank you so so so Much !!!!!

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

Could you create this same thing using bootstrap or antd instead of tailwind ?

How to do? if I need check on unique email for registration in first step?

Thank you so much, Austin!

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

time savior !

Thanks for this amazing tutorial.

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