Stepper Component

The Stepper component provides a visual representation of progress through a sequence of steps, perfect for multi-step forms, wizards, and progress tracking.

Key Features

• Multiple Layouts: Horizontal and vertical orientations

• Visual Variants: Numbers, checkmarks, or mixed indicators

• Interactive Navigation: Click-to-navigate between steps

• Accessibility: ARIA labels and keyboard navigation support

Basic Usage

Create a simple horizontal stepper:

1
<Stepper steps={4} currentStep={2} />

Variants

Vertical Layout

1
<Stepper steps={3} labels currentStep={2} mode="vertical" />

Checkmark Style

1
<Stepper steps={4} currentStep={3} variant="checkmarks" />

With Custom Labels

steps prop is not required if labels prop is an array. If labels is set to true, the labels will be generated as “Step 1”, “Step 2”, etc.

1
<Stepper currentStep={2} labels={['Introduction', 'Sign Up', 'Confirmation']} />

Overflow Behavior

overflow prop can be set to scroll or wrap. If scroll is set, the stepper will allow horizontal scrolling. If wrap is set, the stepper will allow wrapping to next line.

1
<Stepper currentStep={2} labels={['Introduction', 'Sign Up', 'More Steps', 'Another Step', 'Confirmation']} overflow="scroll" />

1
<Stepper currentStep={2} labels={['Introduction', 'Sign Up', 'More Steps', 'Another Step', 'Confirmation']} overflow="wrap" />

Navigation

It is recommended to use either sequential or disabled navigation so that the user will not skip over any steps.

Free Navigation

User can click any step to navigate to it.

1
<Stepper steps={3} currentStep={2} navigation="free" />

Sequential Navigation

User can only navigate back to previous steps.

1
<Stepper steps={3} currentStep={2} navigation="sequential" />

Disabled Navigation

User cannot navigate to any step.

1
<Stepper steps={3} currentStep={2} navigation="none" />

Stepper Component Props API

Stepper Component Functions API

Stepper Component Events

1
// Listen for step changes
2
stepper.addEventListener(StepperEventNames.StepChange, (event) => {
3
  const { currentStep, totalSteps } = event.detail;
4
  console.log('Current step:', currentStep);
5
});

Custom Event Listeners

Click on any step to see events…