Multi-step form
A checkout-style wizard with a step rail, per-step validation, a review step with edit links back to each step, a pending confirm and a success screen.
Preview
- ReviewCheck and confirm, current
- Review, current
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| form | FormApi<V> | — | The object from our useForm; holds values, validators and errors for every step. |
| steps | { id, title, description?, fields, content, summary? }[] | — | Steps in order; fields are validated on Continue; summary lines feed the review. |
| onComplete | (values) => void | Promise<void> | — | Runs on confirm; throw to show a message on the review step. |
| success | (values) => ReactNode | — | Screen shown after onComplete succeeds. |
| submitLabel | string | "Confirm" | Confirm button text, e.g. "Pay $198.00". |
| submitNote | ReactNode | — | Short note beside the confirm button. |
| defaultStep | number | 0 | Step to open on; steps.length opens the review. |
| label | string | "Checkout" | Accessible name of the form and rail. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.