Wizard drawer

WizardDrawer offers a way to show some information without creating a dedicated page for it. Usually used for creating a resource in many steps, while staying on the same page.

#Example

#Single step

When the drawer only has one step, the step indicator is hidden so the layout matches a simple form drawer. Use this for lightweight create flows that do not need multiple steps.

#Controlled vs uncontrolled

The wizard drawer may be used controlled or uncontrolled.

#Uncontrolled

When uncontrolled, the wizard drawer will manage the active step internally. If submit throws, then the step will not be incremented. An error function may be used to handle the error of the submit.

#Controlled

To use the wizard drawer controlled, provide an activeStep prop.

When controlled, the active step is managed by the parent component. Use submit and back to manage the step state. An error function may be used to handle the error of the submit.

Note: the first step will not show a back button unless back is provided.

#Close button variant

Use the "icon" close button variant to render an icon button as the exit button. This variant should be used in Journeys, since the other drawers use icon buttons as exit buttons.

#Guidelines

#When to use

• To display a creation flow that doesn't have a dedicated page.
• For a single-step create or edit form when you want the wizard drawer's footer and submit behavior without step navigation chrome.

#When not to use

• To display information. Use the Drawer to display information in a drawer.

#Props

#Wizard drawer props

Name	Default	Description
blockBackgroundInteraction	true	boolean Block scrolling of content behind drawer.
closeOnOverlayClick	false	boolean Close drawer on overlay click.
closeButtonVariant	"text"	"text" | "icon" Variant of the close button.
isOpen	false	boolean Determines if drawer is open.
title	—	string Title to display at the top of the drawer.
hasOverlay	false	boolean Render overlay.
size	"md"	"sm" | "md" | "lg" | "xl" | "full" Drawer size.
topDisplacement	0	number | string Top displacement of the drawer.
onClose	—	() => void Callback invoked to close the drawer.
activeStep	—	number The current step index. Required for controlled components.
onStepChange	—	(step: number) => void Callback invoked when the continue or back button is clicked. Required for controlled components.
steps	—	ControlledWizardStep[] | UncontrolledWizardStep[] The steps of the wizard.

#Controlled wizard drawer step props

Name	Default	Description
continue	"Continue"	ReactNode Label or node to display on the continue button. The last step's default is "Save".
submit	—	() => void | Promise<void> Callback invoked when the continue button is clicked.
error	—	(error: unknown) => void | Promise<void> Callback invoked when the submit callback throws.
back	—	() => void Callback invoked when the back button is clicked.
isDisabled	false	boolean Whether the next step is disabled.
label	—	string The step label.
tooltip	—	string Tooltip to display on the continue button.
backLabel	"Go back"	string Label to display on the back button.
bodyBackground	—	string Background color of the drawer body.
render	—	FC The step content.

#Uncontrolled wizard drawer step props

Name	Default	Description
continue	"Continue"	string Label to display on the continue button. The last step's default is "Save".
submit	—	() => void | Promise<void> Callback invoked when the continue button is clicked.
error	—	(error: unknown) => void | Promise<void> Callback invoked when the submit callback throws.
isDisabled	false	boolean Whether the next step is disabled.
label	—	string The step label.
tooltip	—	string Tooltip to display on the continue button.
backLabel	"Go back"	string Label to display on the back button.
bodyBackground	—	string Background color of the drawer body.
render	—	FC The step content.