Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Multi-step form shell with progress, controlled or uncontrolled navigation, optional steps, validation gates, and explicit completion and cancellation callbacks.
Pass an ordered steps array containing stable IDs, labels, descriptions, and React content. Pair the wizard with Form state when multiple steps need shared values, dirty/touched metadata, and validation without prop drilling.
activeStep with onStepChange for controlled navigation, or defaultActiveStep for local state.canAdvance can block Continue; onValidationError reports the blocked step.onCancel, onComplete, and onStepChange expose every user action to the host application.aria-current="step" and owns the labelled content region.aria-live region.| Prop | Type | Default | Description |
|---|---|---|---|
activeStep | number | 0 | Configures active step. |
allowStepNavigation | boolean | true | Configures allow step navigation. |
orientation | string | horizontal | Configures orientation. |
showCancel | boolean | true | Configures show cancel. |
showDescriptions | boolean | true | Configures show descriptions. |