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.

ExamplesPropsCSS Variables

Examples

Simple wizard

Copied to clipboard

Wizard - compact navigation (Wizard

Copied to clipboard

Wizard - steps not clickable in side nav until step is reached (step

Copied to clipboard

Wizard - finished step (step

Copied to clipboard

Wizard - enable Next button on form validation

Copied to clipboard

Wizard - validate on button press

Copied to clipboard

Wizard - progressive steps

Copied to clipboard

Full height and width wizard

Copied to clipboard

Wizard - remember last step

Copied to clipboard

Wizard - in page

Copied to clipboard

Props

WizardBody Props

The WizardBody component accepts the following props.

NameTypeRequiredDefaultDescription
hasBodyPaddingtrue

Wizard Props

The Wizard component accepts the following props.

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() => voidCallback 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

WizardFooter Props

The WizardFooter component accepts the following props.

NameTypeRequiredDefaultDescription
childrenanyButtons in the footer

WizardHeader Props

The WizardHeader component accepts the following props.

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

WizardNav Props

The WizardNav component accepts the following props.

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

WizardToggle Props

The WizardToggle component accepts the following props.

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

WizardNavItem Props

The WizardNavItem component accepts the following props.

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

CSS Variables

--pf-c-wizard--BoxShadowc_wizard_BoxShadownone
--pf-c-wizard--Heightc_wizard_Height100%
--pf-c-wizard--Widthc_wizard_Widthauto
--pf-c-wizard__close--FontSizec_wizard__close_FontSize1.25rem
--pf-c-wizard__close--Rightc_wizard__close_Right0
--pf-c-wizard__close--Topc_wizard__close_Topcalc(1.5rem - 0.375rem)
--pf-c-wizard__close--lg--Rightc_wizard__close_lg_Right1rem
--pf-c-wizard__description--Colorc_wizard__description_Color#ededed
--pf-c-wizard__description--PaddingTopc_wizard__description_PaddingTop0.5rem
--pf-c-wizard__footer--PaddingBottomc_wizard__footer_PaddingBottom0.5rem
--pf-c-wizard__footer--PaddingLeftc_wizard__footer_PaddingLeft1rem
--pf-c-wizard__footer--PaddingRightc_wizard__footer_PaddingRight1rem
--pf-c-wizard__footer--PaddingTopc_wizard__footer_PaddingTop1rem
--pf-c-wizard__footer--child--MarginBottomc_wizard__footer_child_MarginBottom0.5rem
--pf-c-wizard__footer--child--MarginRightc_wizard__footer_child_MarginRight1rem
--pf-c-wizard__footer--lg--PaddingBottomc_wizard__footer_lg_PaddingBottom1.5rem
--pf-c-wizard__footer--lg--PaddingLeftc_wizard__footer_lg_PaddingLeft2rem
--pf-c-wizard__footer--lg--PaddingRightc_wizard__footer_lg_PaddingRight2rem
--pf-c-wizard__footer--lg--PaddingTopc_wizard__footer_lg_PaddingTop2rem
--pf-c-wizard__header--BackgroundColorc_wizard__header_BackgroundColor#151515
--pf-c-wizard__header--PaddingBottomc_wizard__header_PaddingBottom1.5rem
--pf-c-wizard__header--PaddingLeftc_wizard__header_PaddingLeft1rem
--pf-c-wizard__header--PaddingRightc_wizard__header_PaddingRight1rem
--pf-c-wizard__header--PaddingTopc_wizard__header_PaddingTop1.5rem
--pf-c-wizard__header--ZIndexc_wizard__header_ZIndex300
--pf-c-wizard__header--lg--PaddingLeftc_wizard__header_lg_PaddingLeft2rem
--pf-c-wizard__header--lg--PaddingRightc_wizard__header_lg_PaddingRight2rem
--pf-c-wizard__main--ZIndexc_wizard__main_ZIndex100
--pf-c-wizard__main-body--PaddingBottomc_wizard__main_body_PaddingBottom1rem
--pf-c-wizard__main-body--PaddingLeftc_wizard__main_body_PaddingLeft1rem
--pf-c-wizard__main-body--PaddingRightc_wizard__main_body_PaddingRight1rem
--pf-c-wizard__main-body--PaddingTopc_wizard__main_body_PaddingTop1rem
--pf-c-wizard__main-body--lg--PaddingBottomc_wizard__main_body_lg_PaddingBottom2rem
--pf-c-wizard__main-body--lg--PaddingLeftc_wizard__main_body_lg_PaddingLeft2rem
--pf-c-wizard__main-body--lg--PaddingRightc_wizard__main_body_lg_PaddingRight2rem
--pf-c-wizard__main-body--lg--PaddingTopc_wizard__main_body_lg_PaddingTop2rem
--pf-c-wizard__nav--BackgroundColorc_wizard__nav_BackgroundColor#fff
--pf-c-wizard__nav--BoxShadowc_wizard__nav_BoxShadow0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,.25)
--pf-c-wizard__nav--Widthc_wizard__nav_Width100%
--pf-c-wizard__nav--ZIndexc_wizard__nav_ZIndex200
--pf-c-wizard__nav-item--MarginTopc_wizard__nav_item_MarginTop1rem
--pf-c-wizard__nav--lg--BoxShadowc_wizard__nav_lg_BoxShadow0.75rem 0 0.625rem -0.25rem rgba(3,3,3,.07)
--pf-c-wizard__nav--lg--Widthc_wizard__nav_lg_Width18.75rem
--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color#737679
--pf-c-wizard__nav-link--TextDecorationc_wizard__nav_link_TextDecorationunderline
--pf-c-wizard__nav-link--before--BackgroundColorc_wizard__nav_link_before_BackgroundColortransparent
--pf-c-wizard__nav-link--before--BorderRadiusc_wizard__nav_link_before_BorderRadius30em
--pf-c-wizard__nav-link--before--Colorc_wizard__nav_link_before_Color#737679
--pf-c-wizard__nav-link--before--FontSizec_wizard__nav_link_before_FontSize0.875rem
--pf-c-wizard__nav-link--before--Heightc_wizard__nav_link_before_Height1.5rem
--pf-c-wizard__nav-link--before--Topc_wizard__nav_link_before_Top0
--pf-c-wizard__nav-link--before--Transformc_wizard__nav_link_before_TransformtranslateX(calc(-100% - 0.5rem))
--pf-c-wizard__nav-link--before--Widthc_wizard__nav_link_before_Width1.5rem
--pf-c-wizard__nav-link--focus--Colorc_wizard__nav_link_focus_Color#06c
--pf-c-wizard__nav-link--hover--Colorc_wizard__nav_link_hover_Color#06c
--pf-c-wizard__nav-link--m-current--Colorc_wizard__nav_link_m_current_Color#06c
--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-disabled--Colorc_wizard__nav_link_m_disabled_Color#737679
--pf-c-wizard__nav-link--m-disabled--before--BackgroundColorc_wizard__nav_link_m_disabled_before_BackgroundColortransparent
--pf-c-wizard__nav-link--m-disabled--before--Colorc_wizard__nav_link_m_disabled_before_Color#737679
--pf-c-wizard__nav-list--PaddingBottomc_wizard__nav_list_PaddingBottom2rem
--pf-c-wizard__nav-list--PaddingLeftc_wizard__nav_list_PaddingLeftcalc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--PaddingRightc_wizard__nav_list_PaddingRight1rem
--pf-c-wizard__nav-list--PaddingTopc_wizard__nav_list_PaddingTop2rem
--pf-c-wizard__nav-list--lg--PaddingLeftc_wizard__nav_list_lg_PaddingLeftcalc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--lg--PaddingRightc_wizard__nav_list_lg_PaddingRight2rem
--pf-c-wizard__nav-list--nested--MarginLeftc_wizard__nav_list_nested_MarginLeft1rem
--pf-c-wizard__nav-list--nested--MarginTopc_wizard__nav_list_nested_MarginTop1rem
--pf-c-wizard__outer-wrap--BackgroundColorc_wizard__outer_wrap_BackgroundColor#fff
--pf-c-wizard__outer-wrap--lg--PaddingLeftc_wizard__outer_wrap_lg_PaddingLeft0
--pf-c-wizard__title--PaddingRightc_wizard__title_PaddingRight3rem
--pf-c-wizard__toggle--BackgroundColorc_wizard__toggle_BackgroundColor#fff
--pf-c-wizard__toggle--BoxShadowc_wizard__toggle_BoxShadow0 0.3125rem 0.625rem -0.25rem rgba(3,3,3,.25)
--pf-c-wizard__toggle--PaddingBottomc_wizard__toggle_PaddingBottom1.5rem
--pf-c-wizard__toggle--PaddingLeftc_wizard__toggle_PaddingLeftcalc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__toggle--PaddingRightc_wizard__toggle_PaddingRight1rem
--pf-c-wizard__toggle--PaddingTopc_wizard__toggle_PaddingTop1.5rem
--pf-c-wizard__toggle--ZIndexc_wizard__toggle_ZIndex300
--pf-c-wizard__toggle-icon--LineHeightc_wizard__toggle_icon_LineHeight1.5
--pf-c-wizard__toggle-icon--MarginTopc_wizard__toggle_icon_MarginTop0
--pf-c-wizard__toggle-list--MarginBottomc_wizard__toggle_list_MarginBottomcalc(0.25rem * -1)
--pf-c-wizard__toggle-list--MarginRightc_wizard__toggle_list_MarginRight0.5rem
--pf-c-wizard__toggle-list-item--MarginBottomc_wizard__toggle_list_item_MarginBottom0.25rem
--pf-c-wizard__toggle-list-item--not-last-child--MarginRightc_wizard__toggle_list_item_not_last_child_MarginRight0.5rem
--pf-c-wizard__toggle--m-expanded__toggle-icon--Transformc_wizard__toggle_m_expanded__toggle_icon_Transformrotate(180deg)
--pf-c-wizard__toggle-num--before--Topc_wizard__toggle_num_before_Top0
--pf-c-wizard__toggle-separator--Colorc_wizard__toggle_separator_Color#8a8d90
--pf-c-wizard__toggle-separator--MarginLeftc_wizard__toggle_separator_MarginLeft0.5rem
--pf-c-wizard--lg--Heightc_wizard_lg_Height47.625rem
--pf-c-wizard--lg--MaxHeightc_wizard_lg_MaxHeightcalc(100% - (3rem * 2))
--pf-c-wizard--lg--MaxWidthc_wizard_lg_MaxWidth77rem
--pf-c-wizard--lg--Widthc_wizard_lg_Widthcalc(100% - (3rem * 2))
--pf-c-wizard--m-compact-nav__nav--lg--Widthc_wizard_m_compact_nav__nav_lg_Width15.625rem
--pf-c-wizard--m-full-height--lg--Heightc_wizard_m_full_height_lg_Height100%
--pf-c-wizard--m-full-width--lg--MaxWidthc_wizard_m_full_width_lg_MaxWidthauto
--pf-c-wizard--m-in-page--BoxShadowc_wizard_m_in_page_BoxShadownone
--pf-c-wizard--m-in-page--Heightc_wizard_m_in_page_Height100%
--pf-c-wizard--m-in-page--Widthc_wizard_m_in_page_Widthauto
--pf-c-wizard--m-in-page__footer--md--PaddingBottomc_wizard_m_in_page__footer_md_PaddingBottom1.5rem
--pf-c-wizard--m-in-page__footer--md--PaddingLeftc_wizard_m_in_page__footer_md_PaddingLeft2rem
--pf-c-wizard--m-in-page__footer--md--PaddingRightc_wizard_m_in_page__footer_md_PaddingRight2rem
--pf-c-wizard--m-in-page__footer--md--PaddingTopc_wizard_m_in_page__footer_md_PaddingTop2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingBottomc_wizard_m_in_page__main_body_md_PaddingBottom2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingLeftc_wizard_m_in_page__main_body_md_PaddingLeft2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingRightc_wizard_m_in_page__main_body_md_PaddingRight2rem
--pf-c-wizard--m-in-page__main-body--md--PaddingTopc_wizard_m_in_page__main_body_md_PaddingTop2rem
--pf-c-wizard--m-in-page__nav--lg--BorderRightColorc_wizard_m_in_page__nav_lg_BorderRightColor#d2d2d2
--pf-c-wizard--m-in-page__nav--lg--BorderRightWidthc_wizard_m_in_page__nav_lg_BorderRightWidth1px
--pf-c-wizard--m-in-page__nav--lg--BoxShadowc_wizard_m_in_page__nav_lg_BoxShadownone
--pf-c-wizard--m-in-page__nav--lg--Widthc_wizard_m_in_page__nav_lg_Width15.625rem
--pf-c-wizard--m-in-page__nav-list--md--PaddingLeftc_wizard_m_in_page__nav_list_md_PaddingLeftcalc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page__toggle--md--PaddingLeftc_wizard_m_in_page__toggle_md_PaddingLeftcalc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page--lg--MaxHeightc_wizard_m_in_page_lg_MaxHeightnone
--pf-c-wizard--m-in-page--lg--MaxWidthc_wizard_m_in_page_lg_MaxWidthnone