Navigation

Steppers for guided flows

Steppers show progress across ordered stages. Each StepperItem can surface an indicator, title, and supporting description while the root tracks the active index.

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

Vertical

1
Draft

Autosaved

2
Review

Awaiting approval

3
Published

Live to readers

Stepper code examples

Use Show output / Show code on each row. Snippets start with a Variant line naming orientation, active step, and size.


Horizontal · appearance: complete

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: current

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: upcoming

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: sky

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: rose

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: purple

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: pink

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: orange

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: yellow

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: teal

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: indigo

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: emerald

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gray

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: violet

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-blue

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-green

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-red

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-yellow

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-purple

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-teal

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-indigo

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-pink

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


Horizontal · appearance: gradient-orange

1
Details

Confirm items

2
Payment

Billing method

3
Review

Submit order

4
Details

Confirm items

5
Payment

Billing method

6
Review

Submit order

7
Details

Confirm items

8
Payment

Billing method

9
Review

Submit order


VerticalSM

1
Draft

Autosaved

2
Review

Awaiting approval

3
Published

Live to readers

Overview

Orientation switches between horizontal stacks for top-of-page flows and vertical stacks for side rails. Indicators default to numeric labels but accept custom content.

Common use cases

  • Checkout and payment flows.
  • Account onboarding and KYC.
  • Publishing pipelines with approvals.
  • Support ticket escalation stages.

FAQ

How is the active step determined?

Pass activeStep as a zero-based index. Steps before the index render as complete, the matching index renders as current, and later steps render as upcoming.

Does the stepper use a real list element?

The root uses role="list" with listitem roles on items so separators and layout can stay flexible without breaking list semantics.