React

Wizard

A wizard is a structured page used for presenting sequential, stepwise workflows. Wizards typically exist in a modal dialog, but may also be designed to occupy a full page.

PropsCSS Variables

Examples

Basic

Compact nav

Incrementally enabled steps

Finished

Enabled on form validation

Validate on button press

Progressive steps

Full height and width

Remember last step

In page

Props

Wizard properties
NameTypeRequiredDefaultDescription
isOpenbooleanfalseTrue to show the wizard (not applicable for isInPage)
isInPagebooleanfalseTrue to show the wizard without the modal
isCompactNavbooleanfalseIf true makes the navigation more compact
isFullHeightbooleanfalseTrue to set full height wizard
isFullWidthbooleanfalseTrue to set full width wizard
widthnumber | stringnull as stringCustom width of the wizard
heightnumber | stringnull as stringCustom height of the wizard
titlestring''The wizard title (required unless isInPage is used)
descriptionstring''The wizard description
onClose() => void() => undefined as anyCallback function to close the wizard
onGoToStep( newStep: { id?: string | number; name: string }, prevStep: { prevId?: string | number; prevName: string } ) => voidnull as WizardStepFunctionTypeCallback function when a step in the nav is clicked
classNamestring''Additional classes spread to the Wizard
stepsWizardStep[]The wizard steps configuration object
startAtStepnumber1The current step the wizard is on (1 or higher)
ariaLabelNavstring'Steps'aria-label for the Nav
hasBodyPaddingbooleantrueCan remove the default padding around the main body content by setting this to false
footerReact.ReactNodenull as React.ReactNode(Use to control the footer) Passing in a footer component lets you control the buttons yourself
onSave() => void(Unused if footer is controlled) Callback function to save at the end of the wizard, if not specified uses onClose
onNext( newStep: { id?: string | number; name: string }, prevStep: { prevId?: string | number; prevName: string } ) => voidnull as WizardStepFunctionType(Unused if footer is controlled) Callback function after Next button is clicked
onBack( newStep: { id?: string | number; name: string }, prevStep: { prevId?: string | number; prevName: string } ) => voidnull as WizardStepFunctionType(Unused if footer is controlled) Callback function after Back button is clicked
nextButtonTextstring'Next'(Unused if footer is controlled) The Next button text
backButtonTextstring'Back'(Unused if footer is controlled) The Back button text
cancelButtonTextstring'Cancel'(Unused if footer is controlled) The Cancel button text
ariaLabelCloseButtonstring'Close'(Unused if footer is controlled) aria-label for the close button
appendToHTMLElement | (() => HTMLElement)null as HTMLElementThe parent container to append the modal to. Defaults to document.body
WizardNav properties
NameTypeRequiredDefaultDescription
childrenanychildren should be WizardNavItem components
ariaLabelstringaria-label applied to the nav element
isOpenbooleanfalseWhether the nav is expanded
returnListbooleanfalseTrue to return the inner list without the wrapping nav element
WizardNavItem properties
NameTypeRequiredDefaultDescription
childrenReact.ReactNodenullCan nest a WizardNav component for substeps
textstring''The text to display in the nav item
isCurrentbooleanfalseWhether the nav item is the currently active item
isDisabledbooleanfalseWhether the nav item is disabled
stepnumberThe step passed into the onNavItemClick callback
onNavItemClick(step: number) => any() => undefinedCallback for when the nav item is clicked
navItemComponentReact.ReactNode'a'Component used to render WizardNavItem
WizardHeader properties
NameTypeRequiredDefaultDescription
onClose() => void() => undefinedCallback function called when the X (Close) button is clicked
titlestringTitle of the wizard
descriptionstringDescription of the wizard
ariaLabelCloseButtonstringaria-label applied to the X (Close) button
titleIdstringid for the title
descriptionIdstringid for the description
WizardBody properties
NameTypeRequiredDefaultDescription
hasBodyPaddingtruenull
WizardFooter properties
NameTypeRequiredDefaultDescription
childrenanyButtons in the footer
WizardToggle properties
NameTypeRequiredDefaultDescription
navanyFunction that returns the WizardNav component
stepsWizardStep[]The wizard steps
activeStepWizardStepThe currently active WizardStep
childrenReact.ReactNodeThe WizardFooter
hasBodyPaddingbooleantrueSet to false to remove body padding
isNavOpenbooleanIf the nav is open
onNavToggle(isOpen: boolean) => voidCallback function for when the nav is toggled

CSS Variables

--pf-c-wizard__close--FontSizec_wizard__close_FontSize
1.25rem
--pf-c-wizard__close--lg--Rightc_wizard__close_lg_Right
1rem
--pf-c-wizard__close--Rightc_wizard__close_Right
0
--pf-c-wizard__close--Topc_wizard__close_Top
calc(1.5rem - 0.375rem)
--pf-c-wizard__description--Colorc_wizard__description_Color
#ededed
--pf-c-wizard__description--PaddingTopc_wizard__description_PaddingTop
0.5rem
--pf-c-wizard__footer--child--MarginBottomc_wizard__footer_child_MarginBottom
0.5rem
--pf-c-wizard__footer--child--MarginRightc_wizard__footer_child_MarginRight
1rem
--pf-c-wizard__footer--lg--PaddingBottomc_wizard__footer_lg_PaddingBottom
1.5rem
--pf-c-wizard__footer--lg--PaddingLeftc_wizard__footer_lg_PaddingLeft
2rem
--pf-c-wizard__footer--lg--PaddingRightc_wizard__footer_lg_PaddingRight
2rem
--pf-c-wizard__footer--lg--PaddingTopc_wizard__footer_lg_PaddingTop
2rem
--pf-c-wizard__footer--PaddingBottomc_wizard__footer_PaddingBottom
0.5rem
--pf-c-wizard__footer--PaddingLeftc_wizard__footer_PaddingLeft
1rem
--pf-c-wizard__footer--PaddingRightc_wizard__footer_PaddingRight
1rem
--pf-c-wizard__footer--PaddingTopc_wizard__footer_PaddingTop
1rem
--pf-c-wizard__header--BackgroundColorc_wizard__header_BackgroundColor
#151515
--pf-c-wizard__header--lg--PaddingLeftc_wizard__header_lg_PaddingLeft
2rem
--pf-c-wizard__header--lg--PaddingRightc_wizard__header_lg_PaddingRight
2rem
--pf-c-wizard__header--PaddingBottomc_wizard__header_PaddingBottom
1.5rem
--pf-c-wizard__header--PaddingLeftc_wizard__header_PaddingLeft
1rem
--pf-c-wizard__header--PaddingRightc_wizard__header_PaddingRight
1rem
--pf-c-wizard__header--PaddingTopc_wizard__header_PaddingTop
1.5rem
--pf-c-wizard__header--ZIndexc_wizard__header_ZIndex
300
--pf-c-wizard__main-body--lg--PaddingBottomc_wizard__main_body_lg_PaddingBottom
2rem
--pf-c-wizard__main-body--lg--PaddingLeftc_wizard__main_body_lg_PaddingLeft
2rem
--pf-c-wizard__main-body--lg--PaddingRightc_wizard__main_body_lg_PaddingRight
2rem
--pf-c-wizard__main-body--lg--PaddingTopc_wizard__main_body_lg_PaddingTop
2rem
--pf-c-wizard__main-body--PaddingBottomc_wizard__main_body_PaddingBottom
1rem
--pf-c-wizard__main-body--PaddingLeftc_wizard__main_body_PaddingLeft
1rem
--pf-c-wizard__main-body--PaddingRightc_wizard__main_body_PaddingRight
1rem
--pf-c-wizard__main-body--PaddingTopc_wizard__main_body_PaddingTop
1rem
--pf-c-wizard__main--ZIndexc_wizard__main_ZIndex
100
--pf-c-wizard__nav--BackgroundColorc_wizard__nav_BackgroundColor
#fff
--pf-c-wizard__nav--BoxShadowc_wizard__nav_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-wizard__nav-item--MarginTopc_wizard__nav_item_MarginTop
1rem
--pf-c-wizard__nav--lg--BoxShadowc_wizard__nav_lg_BoxShadow
0.75rem 0 0.625rem -0.25rem rgba(3,3,3,0.07)
--pf-c-wizard__nav--lg--Widthc_wizard__nav_lg_Width
18.75rem
--pf-c-wizard__nav-link--before--BackgroundColorc_wizard__nav_link_before_BackgroundColor
transparent
--pf-c-wizard__nav-link--before--BorderRadiusc_wizard__nav_link_before_BorderRadius
30em
--pf-c-wizard__nav-link--before--Colorc_wizard__nav_link_before_Color
#737679
--pf-c-wizard__nav-link--before--FontSizec_wizard__nav_link_before_FontSize
0.875rem
--pf-c-wizard__nav-link--before--Heightc_wizard__nav_link_before_Height
1.5rem
--pf-c-wizard__nav-link--before--Topc_wizard__nav_link_before_Top
0
--pf-c-wizard__nav-link--before--Transformc_wizard__nav_link_before_Transform
translateX(calc(-100% - 0.5rem))
--pf-c-wizard__nav-link--before--Widthc_wizard__nav_link_before_Width
1.5rem
--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color
#737679
--pf-c-wizard__nav-link--focus--Colorc_wizard__nav_link_focus_Color
#004080
--pf-c-wizard__nav-link--hover--Colorc_wizard__nav_link_hover_Color
#004080
--pf-c-wizard__nav-link--m-current--before--BackgroundColorc_wizard__nav_link_m_current_before_BackgroundColor
#06c
--pf-c-wizard__nav-link--m-current--before--Colorc_wizard__nav_link_m_current_before_Color
#fff
--pf-c-wizard__nav-link--m-current--Colorc_wizard__nav_link_m_current_Color
#004080
--pf-c-wizard__nav-link--m-disabled--before--BackgroundColorc_wizard__nav_link_m_disabled_before_BackgroundColor
transparent
--pf-c-wizard__nav-link--m-disabled--before--Colorc_wizard__nav_link_m_disabled_before_Color
#737679
--pf-c-wizard__nav-link--m-disabled--Colorc_wizard__nav_link_m_disabled_Color
#737679
--pf-c-wizard__nav-link--TextDecorationc_wizard__nav_link_TextDecoration
underline
--pf-c-wizard__nav-list--lg--PaddingLeftc_wizard__nav_list_lg_PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--lg--PaddingRightc_wizard__nav_list_lg_PaddingRight
2rem
--pf-c-wizard__nav-list--nested--MarginLeftc_wizard__nav_list_nested_MarginLeft
1rem
--pf-c-wizard__nav-list--nested--MarginTopc_wizard__nav_list_nested_MarginTop
1rem
--pf-c-wizard__nav-list--PaddingBottomc_wizard__nav_list_PaddingBottom
2rem
--pf-c-wizard__nav-list--PaddingLeftc_wizard__nav_list_PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--PaddingRightc_wizard__nav_list_PaddingRight
1rem
--pf-c-wizard__nav-list--PaddingTopc_wizard__nav_list_PaddingTop
2rem
--pf-c-wizard__nav--Widthc_wizard__nav_Width
100%
--pf-c-wizard__nav--ZIndexc_wizard__nav_ZIndex
200
--pf-c-wizard__outer-wrap--BackgroundColorc_wizard__outer_wrap_BackgroundColor
#fff
--pf-c-wizard__outer-wrap--lg--PaddingLeftc_wizard__outer_wrap_lg_PaddingLeft
0
--pf-c-wizard__title--PaddingRightc_wizard__title_PaddingRight
3rem
--pf-c-wizard__toggle--BackgroundColorc_wizard__toggle_BackgroundColor
#fff
--pf-c-wizard__toggle--BoxShadowc_wizard__toggle_BoxShadow
0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,0.25)
--pf-c-wizard__toggle-icon--LineHeightc_wizard__toggle_icon_LineHeight
1.5
--pf-c-wizard__toggle-icon--MarginTopc_wizard__toggle_icon_MarginTop
0
--pf-c-wizard__toggle-list-item--MarginBottomc_wizard__toggle_list_item_MarginBottom
0.25rem
--pf-c-wizard__toggle-list-item--not-last-child--MarginRightc_wizard__toggle_list_item_not_last_child_MarginRight
0.5rem
--pf-c-wizard__toggle-list--MarginBottomc_wizard__toggle_list_MarginBottom
calc(0.25rem*-1)
--pf-c-wizard__toggle-list--MarginRightc_wizard__toggle_list_MarginRight
0.5rem
--pf-c-wizard__toggle--m-expanded__toggle-icon--Transformc_wizard__toggle_m_expanded__toggle_icon_Transform
rotate(180deg)
--pf-c-wizard__toggle-num--before--Topc_wizard__toggle_num_before_Top
0
--pf-c-wizard__toggle--PaddingBottomc_wizard__toggle_PaddingBottom
1.5rem
--pf-c-wizard__toggle--PaddingLeftc_wizard__toggle_PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__toggle--PaddingRightc_wizard__toggle_PaddingRight
1rem
--pf-c-wizard__toggle--PaddingTopc_wizard__toggle_PaddingTop
1.5rem
--pf-c-wizard__toggle-separator--Colorc_wizard__toggle_separator_Color
#8a8d90
--pf-c-wizard__toggle-separator--MarginLeftc_wizard__toggle_separator_MarginLeft
0.5rem
--pf-c-wizard__toggle--ZIndexc_wizard__toggle_ZIndex
300
--pf-c-wizard--BoxShadowc_wizard_BoxShadow
none
--pf-c-wizard--Heightc_wizard_Height
100%
--pf-c-wizard--lg--Heightc_wizard_lg_Height
47.625rem
--pf-c-wizard--lg--MaxHeightc_wizard_lg_MaxHeight
calc(100% - 3rem*2)
--pf-c-wizard--lg--MaxWidthc_wizard_lg_MaxWidth
77rem
--pf-c-wizard--lg--Widthc_wizard_lg_Width
calc(100% - 3rem*2)
--pf-c-wizard--m-compact-nav__nav--lg--Widthc_wizard_m_compact_nav__nav_lg_Width
15.625rem
--pf-c-wizard--m-full-height--lg--Heightc_wizard_m_full_height_lg_Height
100%
--pf-c-wizard--m-full-width--lg--MaxWidthc_wizard_m_full_width_lg_MaxWidth
auto
--pf-c-wizard--m-in-page__footer--md--PaddingBottomc_wizard_m_in_page__footer_md_PaddingBottom
1.5rem
--pf-c-wizard--m-in-page__footer--md--PaddingLeftc_wizard_m_in_page__footer_md_PaddingLeft
2rem
--pf-c-wizard--m-in-page__footer--md--PaddingRightc_wizard_m_in_page__footer_md_PaddingRight
2rem
--pf-c-wizard--m-in-page__footer--md--PaddingTopc_wizard_m_in_page__footer_md_PaddingTop
2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingBottomc_wizard_m_in_page__main_body_md_PaddingBottom
2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingLeftc_wizard_m_in_page__main_body_md_PaddingLeft
2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingRightc_wizard_m