Stepper Component - Feature request

[Noah-Haf]

I think a Stepper would be really cool for shadcn UI, something like:

[vousmeevoyez]

check out this pr #318

[guifeliper]

Do you know how can I use it, without being merged?

[papsavas]

Just copy stepper.tsx & useStepper.ts files

[Mahizha-N-S]

i cant find the files

[papsavas]

i cant find the files

The PR has changed alot since last year 😅
You can find the files in the author's repo
And some examples here

Unfortunately the examples do not include the documentation, but you can find the code inside the repo examples folder

[Mahizha-N-S]

i get that,
But which files should we copy and paste and how to use it?
like in that, i have this
import { Step, type StepItem, Stepper, useStepper } from "@/components/stepper";
but stepper is a folder right

[mikdanjey]

@shadcn, We need Wizard / Stepper this feature.

[dorji-dev]

Discussion link to which I have originally posted this: #1869

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 with both forms.

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:

[joshwisehub]

just awesome i have intergrate it in my react project using tanstack router and it worked smoothly.

[HassanDev13]

Hello everyone, here a small try from me :

https://github.com/HassanDev13/stepper-react/