Wizard ✨
A multi-step flow built on top of Stepper. Pass an array of steps — each with a label, an optional hint and its content — and the Wizard renders the active step. The current step is stored in the URL (via tabName) so it's shareable and back-button friendly.
Basic — clickable steps
Navigation is enabled by default: click the numbered steps to move between them. The active step is stored in the URL (?wizBasic=).
- Account
- Company
- Done
Step 1 — Account details
Guided — Next / Back buttons
Steps are not directly clickable (enableNavigation={false}); the user advances with the Next / Back buttons inside each step. Ideal for forms where earlier steps must be completed first.
- Details
- Review
- Finish
Step 1 — enter your details
Props Reference
| Prop | Type | Description |
|---|---|---|
| tabs | Step[] | Steps to render. Each Step: { label, hint?, content, onClick?, href? }. |
| active | number | Controlled active step index (0-based). |
| tabName | string | URL query key used to persist the active step. Default "tab". |
| enableNavigation | boolean | Allow clicking steps to navigate. Default true; set false for a guided flow. |
| className | string | Class for the wrapper element. |
| stepsClassName | string | Class applied to the underlying Stepper. |