Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Navigation

Wizard Steps Button Group for React

Wizard navigation with Back and Next around the step count, and a row of named steps from Account to Review.

Framework
UI library

The navigation of a multi-step form. Back and Next move one step at a time and stop at the ends, with Step 2 of 4 between them. The second row names each step, Account, Profile, Preferences and Review, and lets people jump straight to one; the current step is filled and marked with aria-current.

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

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.

All 39 button group examples