Stepper

A stepper component empowering developers to build complex, multi-step processes with ease.

Radix UI

Stepperize

Open in

Loading component...

When to use

Steppers guide users through multi-step processes. Use this decision tree:

Installation

Usage

const { Stepper } = defineStepper(
  {
    id: 'step-1',
    title: 'Step 1',
  },
  {
    id: 'step-2',
    title: 'Step 2',
  },
  {
    id: 'step-3',
    title: 'Step 3',
  },
);

<Stepper.Provider className="space-y-4" variant="horizontal">
    {({ methods }) => (
    <React.Fragment>
        <Stepper.Navigation>
        {methods.all.map((step) => (
            <Stepper.Step key={step.id} of={step.id} onClick={() => methods.goTo(step.id)}>
            <Stepper.Title>{step.title}</Stepper.Title>
            </Stepper.Step>
        ))}
        </Stepper.Navigation>
        {methods.switch({
        'step-1': (step) => <Content id={step.id} />,
        'step-2': (step) => <Content id={step.id} />,
        'step-3': (step) => <Content id={step.id} />,
        })}
        <Stepper.Controls>
        {!methods.isLast && (
            <Button variant="secondary" onClick={methods.prev} disabled={methods.isFirst}>
            Previous
            </Button>
        )}
        <Button onClick={methods.isLast ? methods.reset : methods.next}>
            {methods.isLast ? 'Reset' : 'Next'}
        </Button>
        </Stepper.Controls>
    </React.Fragment>
    )}
</Stepper.Provider>