On This Page
Wizard layout to display tracking progress in multi-step structures with custom active transitions.
default layoutGuided multi-step tasks where space is ample and step labels are necessarycircles variantCompact layouts with numbered circle indicators, ideal for mobile or dense gridsarrows variantStrict linear progress sequences like checkout flows and delivery tracking systemsvertical alignmentForm wizards on sidepanels or vertical checkout sidebars with varying step lengthsEnter billing information and addresses.
Enter billing information and addresses.
Enter billing information and addresses.
Enter billing information and addresses.
| Prop | Type | Default | Description |
|---|---|---|---|
| steps* | StepItem[] | — | Array of step item structures containing title, description, and icon. |
| currentStep* | number | — | Active step index (0-indexed). |
| orientation | "horizontal" | "vertical" | "horizontal" | Controls whether steps flow horizontal or down vertical. |
| variant | "default" | "circles" | "arrows" | "default" | The preset layout visual style variant. |
| className | string | — | Additional custom class names. |
<ol> and <li> items representing ordered step sequences.aria-current="step" on the active step block to identify status correctly to screen reader engines.