Stepper

Stepper displays a sequence of steps for a multi-step workflow or wizard. Individual steps are declared with Step children. Inspired by the Material UI Stepper, it supports horizontal and vertical orientations, an alternative-label layout, and a nonLinear mode that allows users to navigate between steps freely.

Behaviors

This component supports the following behaviors:

Properties

activeStep

default: 0

The 0-based index of the currently active step. If not set, the first step (index 0) is active. When out of range, it falls back to 0.

nonLinear

default: false

When true, step headers become clickable so users can jump to any step. Default is false (linear navigation via the next/prev APIs).

orientation

default: "horizontal"

Layout orientation of the stepper. In horizontal mode the step headers are laid out in a row above a shared content area; only the active step's content is shown. In vertical mode each step renders its own header with the active step's content expanding beneath it.

Available values: horizontal (default), vertical

stackedLabel

default: false

When true, step labels are placed below the step icons instead of next to them. Works in both horizontal and vertical orientations.

Events

didChange

This event is triggered when value of Stepper has changed.

Signature: didChange(newValue: any): void

• newValue: The new value of the component.

Exposed Methods

next

Advances to the next step. If the current step is the last, no change occurs.

Signature: next(): void

prev

Moves back to the previous step. If the current step is the first, no change occurs.

Signature: prev(): void

reset

Resets the stepper back to the first step (index 0).

Signature: reset(): void

setActiveStep

Sets the active step by its 0-based index.

Signature: setActiveStep(index: number): void

Styling

Theme Variables