Skip to Content
Patternfly Logo

Wizard

A wizard is a structured page used for breaking sequential workflows into a series of steps. Wizards can be presented in a modal dialog or occupy a full page view. Related design guidelines: Wizard

ExamplesDocumentationCSS Variables

Examples

Documentation

Accessibility

AttributeApplied toOutcome
aria-expanded="true".pf-c-wizard__toggleIndicates that the steps menu is visible. Required
aria-expanded="false".pf-c-wizard__toggleIndicates that the steps menu is hidden. Required
aria-label="close".pf-c-wizard__toggle-iconGives the close button an accessible name. Required
aria-hidden="true".pf-c-wizard__toggle-icon, .pf-c-wizard__toggle-dividerHides the icon from assistive technologies. Required
aria-label="Steps".pf-c-wizard__navGives the steps nav element an accessible name. Required
disabledbutton.pf-c-wizard__nav-linkIndicates that the element is disabled. Required when a nav item is disabled
aria-disabled="true"a.pf-c-wizard__nav-linkIndicates that the element is disabled. Required for disabled links with .pf-m-disabled
aria-current="page".pf-c-wizard__nav-linkIndicates the current page link. Can only occur once on page. Required for the current link
tabindex="-1"a.pf-c-wizard__nav-linkRemoves a link from keyboard focus. Required for disabled links with .pf-m-disabled

Usage

ClassApplied toOutcome
.pf-c-wizard<div>Initiates the wizard component. Required
.pf-c-wizard__header<header>Initiates the header. Required when the wizard is in a modal. Not recommended to use when the wizard is placed on a page.
.pf-c-wizard__close.pf-c-button.pf-m-plainInitiates the close button. Required
.pf-c-wizard__title.pf-c-title.pf-m-3xlInitiates the title. Required
.pf-c-wizard__description<p>Initiates the description.
.pf-c-wizard__toggle<button>Initiates the mobile steps menu toggle button. Required
.pf-c-wizard__toggle-list<ol>Initiates the toggle list. Required
.pf-c-wizard__toggle-list-item<li>Initiates a toggle list item. Required
.pf-c-wizard__toggle-num<span>Initiates the step number. Required
.pf-c-wizard__toggle-separator<i>Initiates the separator between steps.
.pf-c-wizard__toggle-icon<span>Initiates the toggle icon wrapper. Required
.pf-c-wizard__outer-wrap<div>Initiates the outer wrapper. Required
.pf-c-wizard__inner-wrap<div>Initiates the inner wrapper. Required
.pf-c-wizard__nav<nav>Initiates the steps nav. Required
.pf-c-wizard__nav-list<ol>Initiates a list of steps. Required
.pf-c-wizard__nav-item<li>Initiates a step list item. Required
.pf-c-wizard__nav-link<a>Initiates a step link. Required
.pf-c-wizard__main<main>, <div>Initiates the main container. Required Note: use the <main> element when when there are no other <main> elements on the page.
.pf-c-wizard__main-body<div>Initiates the main container body section. Required
.pf-c-wizard__footer<footer>Initiates the footer. Required
.pf-m-expanded.pf-c-wizard__toggle, .pf-c-wizard__navModifies the mobile steps toggle and steps menu for the expanded state.
.pf-m-finished.pf-c-wizardModifies the wizard for the finished state.
.pf-m-current.pf-c-wizard__nav-linkModifies a step link for the current state. Required
.pf-m-disabled.pf-c-wizard__nav-linkModifies a step link for the disabled state.
.pf-m-no-padding.pf-c-wizard__main-bodyModifies the main container body to remove the padding.

CSS Variables

.pf-c-wizard__header--pf-global--Color--100global_Color_100
#fff
.pf-c-wizard__header--pf-global--Color--200global_Color_200
#f0f0f0
.pf-c-wizard__header--pf-global--BorderColor--100global_BorderColor_100
#b8bbbe
.pf-c-wizard__header--pf-global--primary-color--100global_primary_color_100
#73bcf7
.pf-c-wizard__header--pf-global--link--Colorglobal_link_Color
#73bcf7
.pf-c-wizard__header--pf-global--link--Color--hoverglobal_link_Color_hover
#73bcf7
.pf-c-wizard__header--pf-global--BackgroundColor--100global_BackgroundColor_100
#151515
.pf-c-wizard__header .pf-c-card--pf-c-card--BackgroundColorc_card_BackgroundColor
rgba(#030303, .32)
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--Colorc_button_m_primary_Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--Colorc_button_m_primary_hover_Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--Colorc_button_m_primary_focus_Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--Colorc_button_m_primary_active_Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--BackgroundColorc_button_m_primary_BackgroundColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColorc_button_m_primary_hover_BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColorc_button_m_primary_focus_BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColorc_button_m_primary_active_BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--Colorc_button_m_secondary_Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--Colorc_button_m_secondary_hover_Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--Colorc_button_m_secondary_focus_Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--Colorc_button_m_secondary_active_Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--BorderColorc_button_m_secondary_BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColorc_button_m_secondary_hover_BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColorc_button_m_secondary_focus_BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--BorderColorc_button_m_secondary_active_BorderColor
#fff
.pf-c-wizard--pf-c-wizard--Heightc_wizard_Height
100%
.pf-c-wizard--pf-c-modal-box--c-wizard--FlexBasisc_modal_box_c_wizard_FlexBasis
47.625rem
.pf-c-wizard--pf-c-wizard__header--BackgroundColorc_wizard__header_BackgroundColor
#151515
.pf-c-wizard--pf-c-wizard__header--ZIndexc_wizard__header_ZIndex
300
.pf-c-wizard--pf-c-wizard__header--PaddingTopc_wizard__header_PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingRightc_wizard__header_PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--PaddingBottomc_wizard__header_PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingLeftc_wizard__header_PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingRightc_wizard__header_lg_PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingLeftc_wizard__header_lg_PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingRightc_wizard__header_xl_PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingLeftc_wizard__header_xl_PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__close--Topc_wizard__close_Top
calc(1.5rem - 0.375rem)
.pf-c-wizard--pf-c-wizard__close--Rightc_wizard__close_Right
0
.pf-c-wizard--pf-c-wizard__close--xl--Rightc_wizard__close_xl_Right
1.5rem
.pf-c-wizard--pf-c-wizard__close--FontSizec_wizard__close_FontSize
1.25rem
.pf-c-wizard--pf-c-wizard__title--PaddingRightc_wizard__title_PaddingRight
3rem
.pf-c-wizard--pf-c-wizard__description--PaddingTopc_wizard__description_PaddingTop
0.5rem
.pf-c-wizard--pf-c-wizard__description--Colorc_wizard__description_Color
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--TextDecorationc_wizard__nav_link_TextDecoration
none
.pf-c-wizard--pf-c-wizard__nav-link--hover--Colorc_wizard__nav_link_hover_Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--focus--Colorc_wizard__nav_link_focus_Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--Colorc_wizard__nav_link_m_current_Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--FontWeightc_wizard__nav_link_m_current_FontWeight
700
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--Colorc_wizard__nav_link_m_disabled_Color
#6a6e73
.pf-c-wizard--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeightc_wizard__nav_list__nav_list__nav_link_m_current_FontWeight
700
.pf-c-wizard--pf-c-wizard__nav-link--before--Widthc_wizard__nav_link_before_Width
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Heightc_wizard__nav_link_before_Height
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Topc_wizard__nav_link_before_Top
0
.pf-c-wizard--pf-c-wizard__nav-link--before--BackgroundColorc_wizard__nav_link_before_BackgroundColor
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--before--BorderRadiusc_wizard__nav_link_before_BorderRadius
30em
.pf-c-wizard--pf-c-wizard__nav-link--before--Colorc_wizard__nav_link_before_Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--before--FontSizec_wizard__nav_link_before_FontSize
0.875rem
.pf-c-wizard--pf-c-wizard__nav-link--before--TranslateXc_wizard__nav_link_before_TranslateX
calc(-100% - 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--BackgroundColorc_wizard__nav_link_m_current_before_BackgroundColor
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--Colorc_wizard__nav_link_m_current_before_Color
#fff
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--BackgroundColorc_wizard__nav_link_m_disabled_before_BackgroundColor
transparent
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--Colorc_wizard__nav_link_m_disabled_before_Color
#6a6e73
.pf-c-wizard--pf-c-wizard__toggle--BackgroundColorc_wizard__toggle_BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__toggle--ZIndexc_wizard__toggle_ZIndex
300
.pf-c-wizard--pf-c-wizard__toggle--BoxShadowc_wizard__toggle_BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__toggle--PaddingTopc_wizard__toggle_PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingRightc_wizard__toggle_PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingBottomc_wizard__toggle_PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingLeftc_wizard__toggle_PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomWidthc_wizard__toggle_m_expanded_BorderBottomWidth
1px
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomColorc_wizard__toggle_m_expanded_BorderBottomColor
#d2d2d2
.pf-c-wizard--pf-c-wizard--m-in-page__toggle--xl--PaddingLeftc_wizard_m_in_page__toggle_xl_PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle-num--before--Topc_wizard__toggle_num_before_Top
0
.pf-c-wizard--pf-c-wizard__toggle-list-item--not-last-child--MarginRightc_wizard__toggle_list_item_not_last_child_MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list-item--MarginBottomc_wizard__toggle_list_item_MarginBottom
0.25rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginRightc_wizard__toggle_list_MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginBottomc_wizard__toggle_list_MarginBottom
calc(0.25rem * -1)
.pf-c-wizard--pf-c-wizard__toggle-separator--MarginLeftc_wizard__toggle_separator_MarginLeft
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-separator--Colorc_wizard__toggle_separator_Color
#8a8d90
.pf-c-wizard--pf-c-wizard__toggle-icon--LineHeightc_wizard__toggle_icon_LineHeight
1.5
.pf-c-wizard--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotatec_wizard__toggle_m_expanded__toggle_icon_Rotate
180deg
.pf-c-wizard--pf-c-wizard__nav--ZIndexc_wizard__nav_ZIndex
200
.pf-c-wizard--pf-c-wizard__nav--BackgroundColorc_wizard__nav_BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__nav--BoxShadowc_wizard__nav_BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__nav--Widthc_wizard__nav_Width
100%
.pf-c-wizard--pf-c-wizard__nav--lg--Widthc_wizard__nav_lg_Width
15.625rem
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightWidthc_wizard__nav_lg_BorderRightWidth
1px
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightColorc_wizard__nav_lg_BorderRightColor
#d2d2d2
.pf-c-wizard--pf-c-wizard__nav-list--PaddingTopc_wizard__nav_list_PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingRightc_wizard__nav_list_PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingBottomc_wizard__nav_list_PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingLeftc_wizard__nav_list_PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingTopc_wizard__nav_list_lg_PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingRightc_wizard__nav_list_lg_PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingBottomc_wizard__nav_list_lg_PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingTopc_wizard__nav_list_xl_PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingRightc_wizard__nav_list_xl_PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingBottomc_wizard__nav_list_xl_PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingLeftc_wizard__nav_list_xl_PaddingLeft
calc(1.5rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginLeftc_wizard__nav_list_nested_MarginLeft
1rem
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginTopc_wizard__nav_list_nested_MarginTop
1rem
.pf-c-wizard--pf-c-wizard__nav-item--MarginTopc_wizard__nav_item_MarginTop
1rem
.pf-c-wizard--pf-c-wizard__outer-wrap--BackgroundColorc_wizard__outer_wrap_BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__outer-wrap--lg--PaddingLeftc_wizard__outer_wrap_lg_PaddingLeft
100%
.pf-c-wizard--pf-c-wizard__main--ZIndexc_wizard__main_ZIndex
100
.pf-c-wizard--pf-c-wizard__main-body--PaddingTopc_wizard__main_body_PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingRightc_wizard__main_body_PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingBottomc_wizard__main_body_PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingLeftc_wizard__main_body_PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingTopc_wizard__main_body_xl_PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingRightc_wizard__main_body_xl_PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingBottomc_wizard__main_body_xl_PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingLeftc_wizard__main_body_xl_PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--PaddingTopc_wizard__footer_PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingRightc_wizard__footer_PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingBottomc_wizard__footer_PaddingBottom
0.5rem
.pf-c-wizard--pf-c-wizard__footer--PaddingLeftc_wizard__footer_PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingTopc_wizard__footer_xl_PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingRightc_wizard__footer_xl_PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingBottomc_wizard__footer_xl_PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingLeftc_wizard__footer_xl_PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--child--MarginRightc_wizard__footer_child_MarginRight
1rem
.pf-c-wizard--pf-c-wizard__footer--child--MarginBottomc_wizard__footer_child_MarginBottom
0.5rem
.pf-c-wizard.pf-m-finished--pf-c-wizard__outer-wrap--lg--PaddingLeftc_wizard__outer_wrap_lg_PaddingLeft
0
.pf-c-wizard__toggle.pf-m-expanded--pf-c-wizard__toggle--BoxShadowc_wizard__toggle_BoxShadow
none
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Topc_wizard__nav_link_before_Top
0
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--BackgroundColorc_wizard__nav_link_before_BackgroundColor
#06c
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Colorc_wizard__nav_link_before_Color
#fff
.pf-c-wizard__nav-link:hover--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color
#06c
.pf-c-wizard__nav-link:focus--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color
#06c
.pf-c-wizard__nav-link.pf-m-current--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color
#06c
.pf-c-wizard__nav-link:disabled--pf-c-wizard__nav-link--Colorc_wizard__nav_link_Color
#6a6e73
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--BackgroundColorc_wizard__nav_link_before_BackgroundColor
transparent
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--Colorc_wizard__nav_link_before_Color
#6a6e73