Wizard

A wizard is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps.

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v6-c-wizard--pf-v6-c-wizard--Height
initial
.pf-v6-c-wizard--pf-v6-c-wizard--Height--base
100%
.pf-v6-c-wizard--pf-v6-c-modal-box--c-wizard--Height--base
47.625rem
.pf-v6-c-wizard--pf-v6-c-wizard__header--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-wizard--pf-v6-c-wizard--m-plain__header--BackgroundColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__header--ZIndex
auto
.pf-v6-c-wizard--pf-v6-c-wizard__header--PaddingBlockStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__header--PaddingInlineEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__header--PaddingBlockEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__header--PaddingInlineStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__header--BorderBlockEndWidth
1px
.pf-v6-c-wizard--pf-v6-c-wizard__header--BorderBlockEndColor
(In light theme) #e0e0e0
.pf-v6-c-wizard--pf-v6-c-wizard__close--InsetBlockStart
calc(1.5rem - 0.5rem)
.pf-v6-c-wizard--pf-v6-c-wizard__close--InsetInlineEnd
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__close--FontSize
1.25rem
.pf-v6-c-wizard--pf-v6-c-wizard__title--PaddingInlineEnd
3rem
.pf-v6-c-wizard--pf-v6-c-wizard__title-text--FontSize
1.75rem
.pf-v6-c-wizard--pf-v6-c-wizard__title-text--FontFamily
"Red Hat Display", "RedHatDisplay", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif
.pf-v6-c-wizard--pf-v6-c-wizard__title-text--FontWeight
600
.pf-v6-c-wizard--pf-v6-c-wizard__title-text--LineHeight
1.3
.pf-v6-c-wizard--pf-v6-c-wizard__title-text--Color
(In light theme) #151515
.pf-v6-c-wizard--pf-v6-c-wizard__description--PaddingBlockStart
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__description--Color
(In light theme) #4d4d4d
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--Gap
0.25rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--Color
(In light theme) #4d4d4d
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--TextDecoration
none
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--hover--Color
(In light theme) #4d4d4d
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--hover--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-current--Color
(In light theme) #151515
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-current--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-disabled--Color
(In light theme) #a3a3a3
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--PaddingBlockStart
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--PaddingInlineStart
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--BackgroundColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--BorderRadius
6px
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-main--BorderWidth
0px
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth
0px
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-current__nav-link-main--BorderWidth
0px
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-toggle--Color
(In light theme) #1f1f1f
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration
100ms
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction
cubic-bezier(.4, 0, .2, 1)
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-toggle-icon--Rotate
0
.pf-v6-c-wizard--pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate
-180deg
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--Width
1.25rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--Height
1.25rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--InsetBlockStart
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--BackgroundColor
(In light theme) #f2f2f2
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--BorderColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--BorderWidth
1px
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--BorderRadius
24px
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--Color
(In light theme) #151515
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--before--FontSize
0.875rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-current--before--Color
(In light theme) #ffffff
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-current--before--BorderColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-disabled--before--Color
(In light theme) #a3a3a3
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-disabled--before--BorderColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-status-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color
(In light theme) #b1380b
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-warning__nav-link-status-icon--Color
(In light theme) #dca614
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link--m-success__nav-link-status-icon--Color
(In light theme) #3d7317
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart
4px
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-status-icon--FontSize
1.25rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-wizard--pf-v6-c-wizard--m-plain__toggle--BackgroundColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--ZIndex
100
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--PaddingBlockStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--PaddingInlineEnd
1rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--PaddingBlockEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--PaddingInlineStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--BorderBlockEndWidth
1px
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--BorderBlockEndColor
(In light theme) #e0e0e0
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-num--InsetBlockStart
0
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd
0.25rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list-item--Gap
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-link-status-icon--LineHeight
1
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-status-icon--Color
(In light theme) #1f1f1f
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list-item--m-danger__status-icon--Color
(In light theme) #b1380b
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list-item--m-warning__status-icon--Color
(In light theme) #dca614
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list-item--m-success__status-icon--Color
(In light theme) #3d7317
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart
2px
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-status-icon--FontSize
1.25rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list--MarginInlineEnd
0.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-list--MarginBlockEnd
calc(0.25rem * -1)
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-separator--Color
(In light theme) #e0e0e0
.pf-v6-c-wizard--pf-v6-c-wizard__toggle-icon--LineHeight
1.5
.pf-v6-c-wizard--pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate
180deg
.pf-v6-c-wizard--pf-v6-c-wizard__nav--ZIndex
200
.pf-v6-c-wizard--pf-v6-c-wizard__nav--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-wizard--pf-v6-c-wizard--m-plain__nav--BackgroundColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__nav--BorderBlockEndWidth
0px
.pf-v6-c-wizard--pf-v6-c-wizard__nav--BorderBlockEndColor
(In light theme) rgb(255, 255, 255, 0.0000)
.pf-v6-c-wizard--pf-v6-c-wizard__nav--BoxShadow
0px 10px 10px -8px rgb(41, 41, 41, 0.1500)
.pf-v6-c-wizard--pf-v6-c-wizard__nav--Width
100%
.pf-v6-c-wizard--pf-v6-c-wizard__nav--lg--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-wizard--pf-v6-c-wizard__nav--lg--Width
15.625rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav--lg--BorderInlineEndWidth
1px
.pf-v6-c-wizard--pf-v6-c-wizard__nav--lg--BorderInlineEndColor
(In light theme) #e0e0e0
.pf-v6-c-wizard--pf-v6-c-wizard__nav-list--PaddingBlockStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-list--PaddingInlineEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-list--PaddingBlockEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-list--PaddingInlineStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-list--nested--MarginInlineStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-list--nested--MarginBlockStart
1rem
.pf-v6-c-wizard--pf-v6-c-wizard__nav-item--MarginBlockStart
1rem
.pf-v6-c-wizard--pf-v6-c-wizard__outer-wrap--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-wizard--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart
100%
.pf-v6-c-wizard--pf-v6-c-wizard__outer-wrap--MinHeight
15.625rem
.pf-v6-c-wizard--pf-v6-c-wizard__main--ZIndex
auto
.pf-v6-c-wizard--pf-v6-c-wizard__main-body--PaddingBlockStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__main-body--PaddingInlineEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__main-body--PaddingBlockEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__main-body--PaddingInlineStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__footer--BackgroundColor
(In light theme) #ffffff
.pf-v6-c-wizard--pf-v6-c-wizard--m-plain__footer--BackgroundColor
transparent
.pf-v6-c-wizard--pf-v6-c-wizard__footer--ZIndex
100
.pf-v6-c-wizard--pf-v6-c-wizard__footer--PaddingBlockStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__footer--PaddingInlineEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__footer--PaddingBlockEnd
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__footer--PaddingInlineStart
1.5rem
.pf-v6-c-wizard--pf-v6-c-wizard__footer--BorderBlockStartWidth
1px
.pf-v6-c-wizard--pf-v6-c-wizard__footer--BorderBlockStartColor
(In light theme) #e0e0e0
.pf-v6-c-wizard.pf-m-finished--pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart
0
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain--pf-v6-c-wizard__header--BackgroundColor
transparent
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain--pf-v6-c-wizard__toggle--BackgroundColor
transparent
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain--pf-v6-c-wizard__outer-wrap--BackgroundColor
transparent
:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain--pf-v6-c-wizard__footer--BackgroundColor
transparent
.pf-v6-c-wizard__toggle-list-item.pf-m-danger--pf-v6-c-wizard__toggle-status-icon--Color
(In light theme) #b1380b
.pf-v6-c-wizard__toggle-list-item.pf-m-warning--pf-v6-c-wizard__toggle-status-icon--Color
(In light theme) #dca614
.pf-v6-c-wizard__toggle-list-item.pf-m-success--pf-v6-c-wizard__toggle-status-icon--Color
(In light theme) #3d7317
.pf-v6-c-wizard__nav-item.pf-m-expanded > .pf-v6-c-wizard__nav-link--pf-v6-c-wizard__nav-link-toggle-icon--Rotate
-180deg
.pf-v6-c-wizard__nav-link.pf-m-current--pf-v6-c-wizard__nav-link--Color
(In light theme) #151515
.pf-v6-c-wizard__nav-link.pf-m-current--pf-v6-c-wizard__nav-link-main--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-wizard__nav-link.pf-m-current--pf-v6-c-wizard__nav-link-main--BorderWidth
0px
.pf-v6-c-wizard__toggle-num--pf-v6-c-wizard__nav-link--before--BackgroundColor
(In light theme) #0066cc
.pf-v6-c-wizard__toggle-num--pf-v6-c-wizard__nav-link--before--Color
(In light theme) #ffffff
.pf-v6-c-wizard__toggle-num--pf-v6-c-wizard__nav-link--before--BorderColor
transparent
.pf-v6-c-wizard__nav-link.pf-m-success--pf-v6-c-wizard__nav-link-status-icon--Color
(In light theme) #3d7317
.pf-v6-c-wizard__nav-link.pf-m-warning--pf-v6-c-wizard__nav-link-status-icon--Color
(In light theme) #dca614
.pf-v6-c-wizard__nav-link.pf-m-danger--pf-v6-c-wizard__nav-link-status-icon--Color
(In light theme) #b1380b
.pf-v6-c-wizard__nav-link:where(:hover, :focus)--pf-v6-c-wizard__nav-link--Color
(In light theme) #4d4d4d
.pf-v6-c-wizard__nav-link:where(:hover, :focus)--pf-v6-c-wizard__nav-link-main--BackgroundColor
(In light theme) rgb(199, 199, 199, 0.2500)
.pf-v6-c-wizard__nav-link:where(:hover, :focus)--pf-v6-c-wizard__nav-link-main--BorderWidth
0px
.pf-v6-c-wizard__nav-link:disabled--pf-v6-c-wizard__nav-link--Color
(In light theme) #a3a3a3
.pf-v6-c-wizard__nav-link:disabled--pf-v6-c-wizard__nav-link-main--BackgroundColor
transparent
.pf-v6-c-wizard__nav-link:disabled::before--pf-v6-c-wizard__nav-link--before--BackgroundColor
transparent
.pf-v6-c-wizard__nav-link:disabled::before--pf-v6-c-wizard__nav-link--before--Color
(In light theme) #a3a3a3
.pf-v6-c-wizard__nav-link:disabled::before--pf-v6-c-wizard__nav-link--before--BorderColor
transparent