How to build multistep form?

[jacob-leger]

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.

[jacob-leger]

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.

[jacob-leger]

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!

[jacob-leger]

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.

[jacob-leger]

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.

[63r6o]

@javed24 it is probably a little bit late, but I usually hold the data in a simple react context which I update and validate during every submission step. Here is a simple example repo, in case somebody finds it useful: https://github.com/63r6o/shadcn-nextjs-multistep-form-example

[ddydng]

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

[dorji-dev]

For anyone reaching till this point, I am doing some research for my company on which form library to choose: formik or react-hook-form. For that I had to create a multi-step form for both so that we can compare DX and features provided by each library. Done for both libraries.

Features include:

• Validation before next step
• Uses controlled component as well with shadcn select and single datepicker
• Conditional validation for some inputs based the value of another input
• If there is error on submit from api, and if the error message contains the field name as well with which the error is associated to, then the step that contains that field is made active and also the input is focused unless it is a controlled component
• If the api error doesn't have field name then a generic message is shown which persists across step change and is being reset automatically on next submit.

All those are done with the help of hooks and components like setError, FormProvider, and useFormContext exposed by the react-hook-form and was a joy to create the stepper. Didn't need any global state manager/context. In the end on submit, you get all the data as all the steps are inside the FormProvider.

Used NextJs app router and here is the link to the page: https://github.com/dorji-dev/formik-vs-react-hook-form/blob/main/src/app/hook-multi-step/page.tsx

You can find the instructions on how to integrate it with an existing project via the repo README file

A preview:

[jacob-leger]

How does that work with the WAI ARIA standard? Do you also use a form component, and how do you signal that that's not the whole thing?

[MJUrian-Learner]

For anyone reaching till this point, I am doing some research for my company on which form library to choose: formik or react-hook-form. For that I had to create a multi-step form for both so that we can compare DX and features provided by each library. Done for both libraries.

Features include:

• Validation before next step

• Uses controlled component as well with shadcn select and single datepicker

• Conditional validation for some inputs based the value of another input

• If there is error on submit from api, and if the error message contains the field name as well with which the error is associated to, then the step that contains that field is made active and also the input is focused unless it is a controlled component

• If the api error doesn't have field name then a generic message is shown which persists across step change and is being reset automatically on next submit.

All those are done with the help of hooks and components like setError, FormProvider, and useFormContext exposed by the react-hook-form and was a joy to create the stepper. Didn't need any global state manager/context. In the end on submit, you get all the data as all the steps are inside the FormProvider.

Used NextJs app router and here is the link to the page: https://github.com/dorji-dev/formik-vs-react-hook-form/blob/main/src/app/hook-multi-step/page.tsx

You can find the instructions on how to integrate it with an existing project via the repo README file

A preview:

How is this implemented using FormField of shadcn and using Zod validation?

[draqist]

Can this also work vertically, i.e the stepper ui itself will be vertical

[dorji-dev]

For anyone reaching till this point, I am doing some research for my company on which form library to choose: formik or react-hook-form. For that I had to create a multi-step form for both so that we can compare DX and features provided by each library. Done for both libraries.
Features include:

• Validation before next step
• Uses controlled component as well with shadcn select and single datepicker
• Conditional validation for some inputs based the value of another input
• If there is error on submit from api, and if the error message contains the field name as well with which the error is associated to, then the step that contains that field is made active and also the input is focused unless it is a controlled component
• If the api error doesn't have field name then a generic message is shown which persists across step change and is being reset automatically on next submit.

All those are done with the help of hooks and components like setError, FormProvider, and useFormContext exposed by the react-hook-form and was a joy to create the stepper. Didn't need any global state manager/context. In the end on submit, you get all the data as all the steps are inside the FormProvider.
Used NextJs app router and here is the link to the page: https://github.com/dorji-dev/formik-vs-react-hook-form/blob/main/src/app/hook-multi-step/page.tsx
You can find the instructions on how to integrate it with an existing project via the repo README file
A preview:

How is this implemented using FormField of shadcn and using Zod validation?

@MJUrian-Learner It is just a matter of replacing each input field with the FormField component from shadcn. As for other controlled components like select component, you can check the doc here https://ui.shadcn.com/docs/components/select#form on how to use it with shadcn FormField component. As for zod validation, you can basically go through shadcn implementation of it. If i get time, i will update the code with zod validation but am really occupied these days so may take some time.

[dorji-dev]

Can this also work vertically, i.e the stepper ui itself will be vertical

Yes, you just need to change the style of the indicator component https://github.com/dorji-dev/formik-vs-react-hook-form/blob/main/src/components/shared/stepper-indicator/index.tsx and you are good to go. If you want the indicator on left side or on any side for that matter, you just need to play with where you want to place it in this file https://github.com/dorji-dev/formik-vs-react-hook-form/blob/2c6fa8603571b227b80338ad403aa4cb2cc2c3e6/src/components/hook-multi-step/index.tsx#L122 and apply styles accordingly as needed.

[martiserra99]

I would totally suggest you to use Formity. It is a package that allows you to build dynamic multi-step forms with just a JSON.

[husayt]

Here is a very good effort by @Ali-Hussein-dev in best traditions of Shadcn. Has a schema driven multistep form, form-builder and code generator as well

https://github.com/Ali-Hussein-dev/indie-ui