Wizard
Loading example…
Multi-step flow on top of Stepper: the current step’s content, then Back / Next / Finish.
Moving forward runs the step’s canAdvance and onBeforeNext; the step heading takes focus
on every change so keyboard and screen-reader users land on the new step. Enter inside a
single-line input advances. Under 420px of its own width the step title becomes visible and
the buttons stack.
Import
Section titled “Import”import { Wizard } from "@jcsoftdev/ui/navigation";Single-component entry points tree-shake to just this component: @jcsoftdev/ui/navigation/wizard.
<Wizard steps={steps} />| Prop | Type | Default | Description |
|---|---|---|---|
steps * |
readonly WizardStep[] |
||
value |
string |
Controlled current step id. | |
defaultValue |
string |
Initial step id when uncontrolled (defaults to the first step). | |
onValueChange |
((stepId: string) => void) |
||
onBeforeNext |
((step: WizardStep, index: number) => boolean | Promise<boolean>) |
Runs before moving forward from a step, after that step’s canAdvance. Return false (or a promise of false) to stay. While it is pending the buttons show a busy state and a second press is ignored. |
|
onComplete |
(() => void | Promise<void>) |
Called by the last step’s finish button; may return a promise (pending state, no double run). | |
backLabel |
string |
Overrides the localized labels. | |
nextLabel |
string |
||
finishLabel |
string |
||
buttonSize |
"sm" | "md" | "lg" |
"md" |
Size of the Back and Next/Finish buttons. Default md (38px, the height of a default field). |
classNames |
Partial<Record<WizardPart, string>> |
Per-part classes merged with cn; consumer classes win. className still targets the root. |
* marks a required prop.
It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).
Storybook stories
Section titled “Storybook stories”- Default
- Finish Calls On Complete
- Blocked By Validation
- Throwing Validation Shows An Error
- Async Validation Is Pending And Runs Once
- Step Can Advance False Disables Next
- Step Can Advance Function
- Enter In An Input Advances
- Controlled
- Spanish
- Compact In Narrow Container
Source
Section titled “Source”packages/ui/src/navigation/wizard/wizard.tsx