How to build multistep form?

[Leiloukou]

How to build a multistep form?

I want to start by writing, "Yes, I know forms are the absolute worst thing ever to have to work with," but this is a vital feature for my startup and I need some help 🆘.

What do I want/need to use?

I want to use React Hook Form, Zod, and I would prefer Framer Motion, if possible. And I obviously want to use the Shadcn/UI.

I am aware of this X post (tweet) by @shadcn himself, which shows an animated multistep form with validation, but I don't know how to replicate it.

I have some crazy features I also need, like date-range-pickers (I told you it was crazy) and a kind of sub-form thing. I don't think you need to worry though. It's really the base concept I need to understand.

One last thing...

One of the most important things I need is good a11y. W/out that, I can't build my app.

[Leiloukou]

I think this might help #318, I will mark this as the answer if the PR gets approved and it works as a multistep form.

But please, give me your ideas if you have any!

[Snailedlt]

The stepper component doesn't have an example for multi-step forms though. It has an example for forms, but it doesn't show you how you can retrieve the data at the end.
I'm really curious how that can be done with Shadcn, React Hook Form and Zod.

[Leiloukou]

The stepper component doesn't have an example for multi-step forms though. It has an example for forms, but it doesn't show you how you can retrieve the data at the end.

Whoops, I didn't know that, thank you for informing me!

I'm really curious how that can be done with Shadcn, React Hook Form and Zod

Same here, if you or anyone finds out how to do so, please let me know!

[Leiloukou]

I'm closing as the step component looks like it will be merged soon.

[javed24]

it hasn't been merged yet. What did you end up doing as your solution for a multi-step form that keeps track of the whole piece of the data throughout all the steps? I've made multi-step forms using Formik before, but I'm curious how it contrasts when building one with react-hook-forms and/or shadcn's version of it.

[Leiloukou]

To be honest, I completely avoided it. In fact, my project has been set aside for a while now. I really hope it gets merged soon.

Sorry I didn't come up with anything.

[ddydng]

This is the repo for the multi step form in the tweet