Blocks
Wizard Block
Hospitality booking flow with validation, optional preferences and review.
Book Your Stay
Complete the steps to book a room.
Step 1 of 5: Guest Info
Provide primary guest contact details.
Props
Any native div prop can be used in addition to the following component specific props.
| Property | Description | Type | Default |
|---|---|---|---|
steps | Ordered list of wizard steps. | Readonly<WizardStep[]> | — |
currentStepId | Currently active step id (controlled). | string | — |
onStepChange | Callback when navigation occurs. | (id: string) => void | — |
onComplete | Invoked after final step validation passes. | () => void | — |
onCancel | Invoked when user cancels from first step. | () => void | — |
labels | Override button labels. | Partial<WizardLabels> | internal defaults |
allowJumping | Allow clicking non-locked rail steps. | boolean | true |
hasUnsavedChanges | Show confirm dialog on cancel when true. | boolean | false |
ariaLabel | ARIA label for the steps region. | string | "Wizard steps" |
announceChanges | Enable polite aria-live step announcements. | boolean | false |
onStepViewed | Analytics hook on step view. | (id: string) => void | — |
persistKey | Persist progress (visited/validated/current) to localStorage. | string | — |
headerTitle | Optional heading above steps. | string | — |
headerDescription | Optional short description. | string | — |
showHeaderDescription | Toggle visibility of header description paragraph. | boolean | true |
className | Additional wrapper classes. | string | — |
footerStart | Custom left side footer content. | ReactNode | — |
footerEnd | Custom right side footer content (before buttons). | ReactNode | — |