Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Wizard Steps Button Group for React

Wizard controls that open on step 2 of 4, with Back, Next, and the names Account through Review.

A four-step form, opening on step 2, Profile. Back and Next move one step and stop at the ends. Between them the text reads Step 2 of 4. The other row names Account, Profile, Preferences, and Review, and any of them can be picked, including a jump to Review.

Use Back and Next when the form is linear, and the names when people may jump. A progress display of its own is Steps. In React, Base UI does not save each step.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex flex-col gap-4">
  <ButtonGroup aria-label="Wizard">
    <Button
      disabled={step === 1}
      onClick={goBack}
      size="sm"
      variant="outline"
    >
      <ChevronLeftIcon aria-hidden="true" data-icon="inline-start" />
      Back
    </Button>
    <Button size="sm" variant="outline">
      Step {step} of {TOTAL_STEPS}
    </Button>
    <Button
      disabled={step === TOTAL_STEPS}
      onClick={goNext}
      size="sm"
      variant="outline"
    >
      Next
      <ChevronRightIcon aria-hidden="true" data-icon="inline-end" />
    </Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Wizard steps">
    <Button
      aria-label="Previous step"
      disabled={step === 1}
      onClick={goBack}
      size="icon-sm"
      variant="outline"
{/* The rest of the file is under Installation. */}

FAQ

How is the step tracked?

A number from 1 to 4, starting at 2. Back and Next step by one, and each named step carries its number as its value.

When are Back and Next disabled?

Back on step 1 and Next on step 4, in both rows. They get disabled from those checks.

How is the current step shown?

Its button uses variant="default" and sets aria-current="step". The others use outline.

Can people jump ahead to Review?

Yes, any named step can be picked. Disable the steps that aren't reachable yet if your form must be filled in order.

How are the chevron buttons named?

The icon-only buttons in the second row have aria-labels, Previous step and Next step. The first row's Back and Next have text.

Is there a component for steps?

Yes. Steps shows the progress and the step content together. This demo is only the navigation.

API Reference

Button Group

Sets aria-label="Wizard" and aria-label="Wizard steps". The rest is on the Button Group page.

Button

Sets disabled={step === 1}, onClick={goBack}, size="sm", variant="outline", disabled={step === TOTAL_STEPS} and onClick={goNext}. The rest is on the Button page.

All 39 button group examples