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.

ExamplesCSS Variables

Examples

Simple wizard

Copied to clipboard

Wizard - compact navigation

Copied to clipboard

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

Copied to clipboard

Wizard - finished 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

CSS Variables

--pf-c-wizard--BoxShadowc_wizard_BoxShadow0 0.1875rem 0.4375rem 0.1875rem rgba(3,3,3,.13),0 0.6875rem 1.5rem 1rem rgba(3,3,3,.12)
--pf-c-wizard--Heightc_wizard_Height100%
--pf-c-wizard--Widthc_wizard_Width100vw
--pf-c-wizard__close--FontSizec_wizard__close_FontSize1.3125rem
--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--lg--PaddingLeftc_wizard__header_lg_PaddingLeft2rem
--pf-c-wizard__header--lg--PaddingRightc_wizard__header_lg_PaddingRight2rem
--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_ZIndex100
--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#72767b
--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#72767b
--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.125rem
--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#72767b
--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#72767b
--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_ZIndex200
--pf-c-wizard__toggle-icon--MarginTopc_wizard__toggle_icon_MarginTop0.375rem
--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--first-child--FontSizec_wizard__toggle_list_item_first_child_FontSize1.125rem
--pf-c-wizard__toggle-list-item--not-last-child--MarginRightc_wizard__toggle_list_item_not_last_child_MarginRight0.5rem
--pf-c-wizard__toggle-num--before--Topc_wizard__toggle_num_before_Top0.125rem
--pf-c-wizard__toggle-separator--Colorc_wizard__toggle_separator_Color#8b8d8f
--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% - 2rem)
--pf-c-wizard--lg--MaxWidthc_wizard_lg_MaxWidth77rem
--pf-c-wizard--lg--Widthc_wizard_lg_Widthcalc(100% - (4rem * 2))