Wizard Dialog
A multi-step dialog with a step rail, per-step validation, back and next, a review summary with edit links, and an inline panel version.
Preview
Members
Invite people now, or later from settings.
- nonoor@pebble.example
- sasam@pebble.example
2 / 3
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | { id, title, description?, content, validate? }[] | — | The steps. validate returns a message to block Next (or a promise of one). Required. |
| step / defaultStep / onStepChange | number / number / (step) => void | — / 0 / — | Controlled or uncontrolled current step. |
| onComplete | () => void | Promise<unknown> | — | From the last step, after every step re-validates. A promise shows “Working…”. |
| finishLabel | string | "Finish" | Last step's primary button. |
| onCancel | () => void | — | Shows Cancel on the first step. |
| title | ReactNode | — | Above the step rail. |
| WizardReview: sections / onEdit | { label, step?, items: [label, value][] }[] / (step) => void | — | A review summary with Edit links back to each step. |
| WizardDialog: children / open / defaultOpen / onOpenChange / dialogTitle | ReactNode / boolean / boolean / (open) => void / string | dialogTitle = title | The trigger and modal state. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.