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

#Controlled vs uncontrolled

The wizard drawer may be used controlled or uncontrolled. To use the wizard drawer controlled, provide an activeStep prop.

#Uncontrolled

When uncontrolled, the wizard drawer will manage the active step internally. If submit throws, then the step will not be incremented.

#Controlled

When controlled, the active step is managed by the parent component. Use submit and back to manage the step state.

#Guidelines

#When to use

• To display a creation flow that doesn't have a dedicated page.

#When not to use

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

#Props

#Wizard drawer props

Name	Default	Description
blockBackgroundInteraction	trueeslint-disable-next-line react/boolean-prop-naming	boolean Block scrolling of content behind drawer.
closeOnOverlayClick	falseeslint-disable-next-line react/boolean-prop-naming	boolean Close drawer on overlay click.
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.
onClose	—	() => void Callback invoked to close the drawer.

#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.
back	—	() => void Callback invoked when the back button is clicked.

#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.