Skip to content
Patternfly Logo

Wizard

Examples

Basic

Step 1 content

Anchors for nav items

Step 1: Read about PF3

Incrementally enabled steps

Step 1 content

Expandable steps

Substep A content

Finished

Step 1 content

Enabled on form validation

Step 1 content

Validate on button press

This example demonstrates how to use the WizardContextConsumer to consume the WizardContext. WizardContext can be used to imperatively move to a specific wizard step.

The definition of the WizardContext is as follows:

interface WizardContext { goToStepById: (stepId: number | string) => void; goToStepByName: (stepName: string) => void; onNext: () => void; onBack: () => void; onClose: () => void; activeStep: WizardStep; }

Step 1 content

Progressive steps

Remember last step

Step 1 content

Wizard in modal

Props

Wizard

*required
NameTypeDefaultDescription
stepsrequiredWizardStep[]The wizard steps configuration object
appendToHTMLElement | (() => HTMLElement)nullThe parent container to append the modal to. Defaults to document.body
backButtonTextReact.ReactNode'Back'(Unused if footer is controlled) The Back button text
cancelButtonTextReact.ReactNode'Cancel'(Unused if footer is controlled) The Cancel button text
classNamestring''Additional classes spread to the Wizard
closeButtonAriaLabelstring'Close'(Unused if footer is controlled) aria-label for the close button
descriptionReact.ReactNode''The wizard description
descriptionComponent'div' | 'p''p'Component type of the description
descriptionIdstringAn optional id for the description
footerReact.ReactNodenull(Use to control the footer) Passing in a footer component lets you control the buttons yourself
hasNoBodyPaddingbooleanfalseCan remove the default padding around the main body content by setting this to true
heightnumber | stringnullCustom height of the wizard
hideClosebooleanfalseFlag indicating whether the close button should be in the header
isNavExpandablebooleanfalseFlag indicating nav items with sub steps are expandable
isOpenbooleanundefinedFlag indicating Wizard modal is open. Wizard will be placed into a modal if this prop is provided
mainAriaLabelstringnullAria-label for the main element
mainAriaLabelledBystringnullSets aria-labelledby on the main element
navAriaLabelstringnullAria-label for the Nav
navAriaLabelledBystringnullSets aria-labelledby on nav element
nextButtonTextReact.ReactNode'Next'(Unused if footer is controlled) The Next button text
onBack( newStep: { id?: string | number; name: React.ReactNode }, prevStep: { prevId?: string | number; prevName: React.ReactNode } ) => voidnull(Unused if footer is controlled) Callback function after Back button is clicked
onClose() => void() => undefined as anyCallback function to close the wizard
onGoToStep( newStep: { id?: string | number; name: React.ReactNode }, prevStep: { prevId?: string | number; prevName: React.ReactNode } ) => voidnullCallback function when a step in the nav is clicked
onNext( newStep: { id?: string | number; name: React.ReactNode }, prevStep: { prevId?: string | number; prevName: React.ReactNode } ) => voidnull(Unused if footer is controlled) Callback function after Next button is clicked
onSave() => void(Unused if footer is controlled) Callback function to save at the end of the wizard, if not specified uses onClose
startAtStepnumber1The current step the wizard is on (1 or higher)
titlestringnullThe wizard title to display if header is desired
titleIdstringAn optional id for the title
widthnumber | stringnullCustom width of the wizard

WizardNav

*required
NameTypeDefaultDescription
aria-labelstringAria-label applied to the nav element
aria-labelledbystringSets the aria-labelledby attribute on the nav element
childrenanychildren should be WizardNavItem components
isOpenbooleanfalseWhether the nav is expanded
returnListbooleanfalseTrue to return the inner list without the wrapping nav element

WizardNavItem

*required
NameTypeDefaultDescription
steprequirednumberThe step passed into the onNavItemClick callback
childrenReact.ReactNodenullCan nest a WizardNav component for substeps
contentReact.ReactNode''The content to display in the nav item
hrefstringnullAn optional url to use for when using an anchor component
isCurrentbooleanfalseWhether the nav item is the currently active item
isDisabledbooleanfalseWhether the nav item is disabled
isExpandablebooleanfalseFlag indicating that this NavItem has child steps and is expandable
navItemComponent'button' | 'a''button'Component used to render WizardNavItem
onNavItemClick(step: number) => any() => undefinedCallback for when the nav item is clicked

WizardHeader

*required
NameTypeDefaultDescription
titlerequiredstringTitle of the wizard
closeButtonAriaLabelstringAria-label applied to the X (Close) button
descriptionReact.ReactNodeDescription of the wizard
descriptionComponent'div' | 'p''p'Component type of the description
descriptionIdstringid for the description
hideClosebooleanFlag indicating whether the close button should be in the header
onClose() => void() => undefinedCallback function called when the X (Close) button is clicked
titleIdstringid for the title

WizardBody

*required
NameTypeDefaultDescription
aria-labelledbyrequiredstringSets the aria-labelledby attribute for the main element
childrenrequiredanyAnything that can be rendered in the Wizard body
aria-labelstringAn aria-label to use for the main element
hasNoBodyPaddingbooleanfalseSet to true to remove the default body padding
mainComponentReact.ElementType'div'Component used as the primary content container

WizardFooter

*required
NameTypeDefaultDescription
childrenrequiredanyButtons in the footer

WizardToggle

*required
NameTypeDefaultDescription
activeSteprequiredWizardStepThe currently active WizardStep
childrenrequiredReact.ReactNodeThe WizardFooter
isNavOpenrequiredbooleanIf the nav is open
navrequired(isWizardNavOpen: boolean) => React.ReactElementFunction that returns the WizardNav component
onNavTogglerequired(isOpen: boolean) => voidCallback function for when the nav is toggled
stepsrequiredWizardStep[]The wizard steps
aria-labelstring'Wizard Toggle'The button's aria-label
hasNoBodyPaddingbooleanfalseSet to true to remove body padding
isInPagebooleantrueIf the wizard is in-page
mainAriaLabelstringnullThe main's aria-label
mainAriaLabelledBystringnullSets aria-labelledby on the main element

CSS variables

.pf-c-wizard__header--pf-global--Color--100
#fff
.pf-c-wizard__header--pf-global--Color--200
#f0f0f0
.pf-c-wizard__header--pf-global--BorderColor--100
#b8bbbe
.pf-c-wizard__header--pf-global--primary-color--100
#73bcf7
.pf-c-wizard__header--pf-global--link--Color
#2b9af3
.pf-c-wizard__header--pf-global--link--Color--hover
#2b9af3
.pf-c-wizard__header--pf-global--BackgroundColor--100
#151515
.pf-c-wizard__header .pf-c-card--pf-c-card--BackgroundColor
rgba(#030303, .32)
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--Color
#06c
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--BackgroundColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--hover--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--focus--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-primary--active--BackgroundColor
#f0f0f0
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--Color
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--hover--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--focus--BorderColor
#fff
.pf-c-wizard__header .pf-c-button--pf-c-button--m-secondary--active--BorderColor
#fff
.pf-c-wizard--pf-c-wizard--Height
100%
.pf-c-wizard--pf-c-modal-box--c-wizard--FlexBasis
47.625rem
.pf-c-wizard--pf-c-wizard__header--BackgroundColor
#151515
.pf-c-wizard--pf-c-wizard__header--ZIndex
300
.pf-c-wizard--pf-c-wizard__header--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__header--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__header--lg--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__header--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__close--Top
calc(1.5rem - 0.375rem)
.pf-c-wizard--pf-c-wizard__close--Right
0
.pf-c-wizard--pf-c-wizard__close--xl--Right
1.5rem
.pf-c-wizard--pf-c-wizard__close--FontSize
1.25rem
.pf-c-wizard--pf-c-wizard__title--PaddingRight
3rem
.pf-c-wizard--pf-c-wizard__description--PaddingTop
0.5rem
.pf-c-wizard--pf-c-wizard__description--Color
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--TextDecoration
none
.pf-c-wizard--pf-c-wizard__nav-link--hover--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--focus--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--Color
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--FontWeight
400
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight
400
.pf-c-wizard--pf-c-wizard__nav-link-toggle--PaddingRight
0.5rem
.pf-c-wizard--pf-c-wizard__nav-link-toggle--PaddingLeft
0.5rem
.pf-c-wizard--pf-c-wizard__nav-link-toggle--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link-toggle-icon--Transition
all 250ms cubic-bezier(.42, 0, .58, 1)
.pf-c-wizard--pf-c-wizard__nav-link-toggle-icon--Rotate
0
.pf-c-wizard--pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate
90deg
.pf-c-wizard--pf-c-wizard__nav-link--before--Width
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Height
1.5rem
.pf-c-wizard--pf-c-wizard__nav-link--before--Top
0
.pf-c-wizard--pf-c-wizard__nav-link--before--BackgroundColor
#f0f0f0
.pf-c-wizard--pf-c-wizard__nav-link--before--BorderRadius
30em
.pf-c-wizard--pf-c-wizard__nav-link--before--Color
#151515
.pf-c-wizard--pf-c-wizard__nav-link--before--FontSize
0.875rem
.pf-c-wizard--pf-c-wizard__nav-link--before--TranslateX
calc(-100% - 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--BackgroundColor
#06c
.pf-c-wizard--pf-c-wizard__nav-link--m-current--before--Color
#fff
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--BackgroundColor
transparent
.pf-c-wizard--pf-c-wizard__nav-link--m-disabled--before--Color
#6a6e73
.pf-c-wizard--pf-c-wizard__toggle--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__toggle--ZIndex
300
.pf-c-wizard--pf-c-wizard__toggle--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__toggle--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__toggle--PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomWidth
1px
.pf-c-wizard--pf-c-wizard__toggle--m-expanded--BorderBottomColor
#d2d2d2
.pf-c-wizard--pf-c-wizard--m-in-page__toggle--xl--PaddingLeft
calc(2rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__toggle-num--before--Top
0
.pf-c-wizard--pf-c-wizard__toggle-list-item--not-last-child--MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list-item--MarginBottom
0.25rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginRight
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-list--MarginBottom
calc(0.25rem * -1)
.pf-c-wizard--pf-c-wizard__toggle-separator--MarginLeft
0.5rem
.pf-c-wizard--pf-c-wizard__toggle-separator--Color
#8a8d90
.pf-c-wizard--pf-c-wizard__toggle-icon--LineHeight
1.5
.pf-c-wizard--pf-c-wizard__toggle--m-expanded__toggle-icon--Rotate
180deg
.pf-c-wizard--pf-c-wizard__nav--ZIndex
200
.pf-c-wizard--pf-c-wizard__nav--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__nav--BoxShadow
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
.pf-c-wizard--pf-c-wizard__nav--Width
100%
.pf-c-wizard--pf-c-wizard__nav--lg--Width
15.625rem
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightWidth
1px
.pf-c-wizard--pf-c-wizard__nav--lg--BorderRightColor
#d2d2d2
.pf-c-wizard--pf-c-wizard__nav-list--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--PaddingLeft
calc(1rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__nav-list--lg--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__nav-list--xl--PaddingLeft
calc(1.5rem + 1.5rem + 0.5rem)
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginLeft
1rem
.pf-c-wizard--pf-c-wizard__nav-list--nested--MarginTop
1rem
.pf-c-wizard--pf-c-wizard__nav-item--MarginTop
1rem
.pf-c-wizard--pf-c-wizard__outer-wrap--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__outer-wrap--lg--PaddingLeft
100%
.pf-c-wizard--pf-c-wizard__outer-wrap--MinHeight
15.625rem
.pf-c-wizard--pf-c-wizard__main--ZIndex
100
.pf-c-wizard--pf-c-wizard__main-body--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__main-body--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingBottom
1.5rem
.pf-c-wizard--pf-c-wizard__main-body--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--BackgroundColor
#fff
.pf-c-wizard--pf-c-wizard__footer--ZIndex
200
.pf-c-wizard--pf-c-wizard__footer--PaddingTop
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingRight
1rem
.pf-c-wizard--pf-c-wizard__footer--PaddingBottom
0.5rem
.pf-c-wizard--pf-c-wizard__footer--PaddingLeft
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingTop
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingRight
1.5rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingBottom
1rem
.pf-c-wizard--pf-c-wizard__footer--xl--PaddingLeft
1.5rem
.pf-c-wizard--pf-c-wizard__footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-wizard--pf-c-wizard__footer--child--MarginRight
1rem
.pf-c-wizard--pf-c-wizard__footer--child--MarginBottom
0.5rem
.pf-c-wizard--pf-c-wizard__footer-cancel--MarginLeft
calc(3rem - 1rem)
.pf-c-wizard.pf-m-finished--pf-c-wizard__outer-wrap--lg--PaddingLeft
0
.pf-c-wizard__toggle.pf-m-expanded--pf-c-wizard__toggle--BoxShadow
none
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Top
0
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--BackgroundColor
#06c
.pf-c-wizard__toggle-num--pf-c-wizard__nav-link--before--Color
#fff
.pf-c-wizard__nav-item.pf-m-expanded > .pf-c-wizard__nav-link--pf-c-wizard__nav-link-toggle-icon--Rotate
90deg
.pf-c-wizard__nav-link:hover--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:hover--pf-c-wizard__nav-link-toggle--Color
#151515
.pf-c-wizard__nav-link:focus--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:focus--pf-c-wizard__nav-link-toggle--Color
#151515
.pf-c-wizard__nav-link.pf-m-current--pf-c-wizard__nav-link--Color
#06c
.pf-c-wizard__nav-link:disabled--pf-c-wizard__nav-link--Color
#6a6e73
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--BackgroundColor
transparent
.pf-c-wizard__nav-link:disabled::before--pf-c-wizard__nav-link--before--Color
#6a6e73

View source on GitHub