Wizard

A wizard provides a guided workflow that offers a path to complete a task, create an object or objects, or finish a series of steps for some other outcome. Wizards should incite trust in the user and guide them through an otherwise overwhelming experience.

If you seek a wizard solution that allows for more composition, see the React next tab.

Examples

Basic

Step 1 content

Basic with disabled steps

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

Create a new thing

Update an existing thing

Get current step

Step 1 content

Wizard with drawer Beta

Information step content

Props

Wizard

*required
Name	Type	Default	Description
stepsrequired	WizardStep[]		The wizard steps configuration object
appendTo	HTMLElement \| (() => HTMLElement)	null	The parent container to append the modal to. Defaults to document.body
backButtonText	React.ReactNode	'Back'	(Unused if footer is controlled) The Back button text
cancelButtonText	React.ReactNode	'Cancel'	(Unused if footer is controlled) The Cancel button text
className	string	''	Additional classes spread to the Wizard
closeButtonAriaLabel	string	'Close'	(Unused if footer is controlled) aria-label for the close button
description	React.ReactNode	''	The wizard description
descriptionComponent	'div' \| 'p'	'p'	Component type of the description
descriptionId	string		An optional id for the description
footer	React.ReactNode	null	(Use to control the footer) Passing in a footer component lets you control the buttons yourself
hasDrawerBeta	boolean	false	Flag indicating the wizard has a drawer for at least one of the wizard steps
hasNoBodyPadding	boolean	false	Can remove the default padding around the main body content by setting this to true
height	number \| string	null	Custom height of the wizard
hideClose	boolean	false	Flag indicating whether the close button should be in the header
isDrawerExpandedBeta	boolean	false	Flag indicating the wizard drawer is expanded
isNavExpandable	boolean	false	Flag indicating nav items with sub steps are expandable
isOpen	boolean	undefined	Flag indicating Wizard modal is open. Wizard will be placed into a modal if this prop is provided
mainAriaLabel	string	null	Aria-label for the main element
mainAriaLabelledBy	string	null	Sets aria-labelledby on the main element
navAriaLabel	string	null	Aria-label for the Nav
navAriaLabelledBy	string	null	Sets aria-labelledby on nav element
nextButtonText	React.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 } ) => void	null	(Unused if footer is controlled) Callback function after Back button is clicked
onClose	() => void	() => undefined as any	Callback function to close the wizard
onCurrentStepChanged	(step: WizardStep) => void		Callback function to signal the current step in the wizard
onGoToStep	( newStep: { id?: string \| number; name: React.ReactNode }, prevStep: { prevId?: string \| number; prevName: React.ReactNode } ) => void	null	Callback function when a step in the nav is clicked
onNext	( newStep: { id?: string \| number; name: React.ReactNode }, prevStep: { prevId?: string \| number; prevName: React.ReactNode } ) => void	null	(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
startAtStep	number	1	The current step the wizard is on (1 or higher)
title	string	null	The wizard title to display if header is desired
titleId	string		An optional id for the title
width	number \| string	null	Custom width of the wizard

WizardNav

*required
Name	Type	Default	Description
aria-label	string		Aria-label applied to the nav element
aria-labelledby	string		Sets the aria-labelledby attribute on the nav element
children	any		children should be WizardNavItem components
isOpen	boolean	false	Whether the nav is expanded
returnList	boolean	false	True to return the inner list without the wrapping nav element

WizardNavItem

*required
Name	Type	Default	Description
steprequired	number		The step passed into the onNavItemClick callback
children	React.ReactNode	null	Can nest a WizardNav component for substeps
content	React.ReactNode	''	The content to display in the nav item
href	string	null	An optional url to use for when using an anchor component
id	string \| number		The id for the nav item
isCurrent	boolean	false	Whether the nav item is the currently active item
isDisabled	boolean	false	Whether the nav item is disabled
isExpandable	boolean	false	Flag indicating that this NavItem has child steps and is expandable
navItemComponent	'button' \| 'a'	'button'	Component used to render WizardNavItem
onNavItemClick	(step: number) => any	() => undefined	Callback for when the nav item is clicked

WizardHeader

*required
Name	Type	Default	Description
titlerequired	string		Title of the wizard
closeButtonAriaLabel	string		Aria-label applied to the X (Close) button
description	React.ReactNode		Description of the wizard
descriptionComponent	'div' \| 'p'	'p'	Component type of the description
descriptionId	string		id for the description
hideClose	boolean		Flag indicating whether the close button should be in the header
onClose	() => void	() => undefined	Callback function called when the X (Close) button is clicked
titleId	string		id for the title

WizardBody

*required
Name	Type	Default	Description
activeSteprequired	WizardStep		The currently active WizardStep
aria-labelledbyrequired	string		Sets the aria-labelledby attribute for the main element
childrenrequired	any		Anything that can be rendered in the Wizard body
aria-label	string		An aria-label to use for the main element
hasDrawer	boolean
hasNoBodyPadding	boolean	false	Set to true to remove the default body padding
isDrawerExpanded	boolean		Flag indicating the wizard drawer is expanded
mainComponent	React.ElementType	'div'	Component used as the primary content container

WizardFooter

*required
Name	Type	Default	Description
childrenrequired	any		Buttons in the footer

WizardToggle

*required
Name	Type	Default	Description
activeSteprequired	WizardStep		The currently active WizardStep
isNavOpenrequired	boolean		If the nav is open
navrequired	(isWizardNavOpen: boolean) => React.ReactElement		Function that returns the WizardNav component
onNavTogglerequired	(isOpen: boolean) => void		Callback function for when the nav is toggled
stepsrequired	WizardStep[]		The wizard steps
aria-label	string	'Wizard Toggle'	The button's aria-label
children	React.ReactNode		The WizardFooter
hasDrawerBeta	boolean		Flag indicating the wizard has a drawer for at least one of the wizard steps
hasNoBodyPadding	boolean	false	Set to true to remove body padding
isDrawerExpandedBeta	boolean		Flag indicating the wizard drawer is expanded
isInPage	boolean	true	If the wizard is in-page
mainAriaLabel	string	null	The main's aria-label
mainAriaLabelledBy	string	null	Sets aria-labelledby on the main element

WizardStep

*required
Name	Type	Description
namerequired	React.ReactNode	The name of the step
canJumpTo	boolean	Enables or disables the step in the navigation. Enabled by default.
component	any	The component to render in the main body
drawerPanelContent	any
drawerToggleButton	React.ReactNode
enableNext	boolean	(Unused if footer is controlled) The condition needed to enable the Next button
hideBackButton	boolean	(Unused if footer is controlled) True to hide the Back button
hideCancelButton	boolean	(Unused if footer is controlled) True to hide the Cancel button
id	string \| number	Optional identifier
isDisabled	boolean	Flag to disable the step in the navigation
isFinishedStep	boolean	Setting to true hides the side nav and footer
nextButtonText	React.ReactNode	(Unused if footer is controlled) Can change the Next button text. If nextButtonText is also set for the Wizard, this step specific one overrides it.
stepNavItemProps	React.HTMLProps<HTMLButtonElement \| HTMLAnchorElement> \| WizardNavItemProps	Props to pass to the WizardNavItem
steps	WizardStep[]	Sub steps

CSS variables


	.pf-c-wizard__header	--pf-global--Color--100	#fff
--pf-global--Color--100 --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header	--pf-global--Color--200	#f0f0f0
--pf-global--Color--200 --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header	--pf-global--BorderColor--100	#b8bbbe
--pf-global--BorderColor--100 --pf-global--BorderColor--light-100 $pf-global--BorderColor--light-100 $pf-color-black-400 #b8bbbe
	.pf-c-wizard__header	--pf-global--primary-color--100	#73bcf7
--pf-global--primary-color--100 --pf-global--primary-color--light-100 $pf-global--primary-color--light-100 $pf-color-blue-200 #73bcf7
	.pf-c-wizard__header	--pf-global--link--Color	#2b9af3
--pf-global--link--Color --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-wizard__header	--pf-global--link--Color--hover	#2b9af3
--pf-global--link--Color--hover --pf-global--link--Color--light $pf-global--link--Color--light $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-wizard__header	--pf-global--BackgroundColor--100	#151515
--pf-global--BackgroundColor--100 --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-wizard__header .pf-c-card	--pf-c-card--BackgroundColor	rgba(#030303, .32)
--pf-c-card--BackgroundColor --pf-global--BackgroundColor--dark-transparent-200 $pf-global--BackgroundColor--dark-transparent-200 rgba($pf-color-black-1000, .32) rgba(#030303, .32)
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--Color	#06c
--pf-c-button--m-primary--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--hover--Color	#06c
--pf-c-button--m-primary--hover--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--focus--Color	#06c
--pf-c-button--m-primary--focus--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--active--Color	#06c
--pf-c-button--m-primary--active--Color --pf-global--primary-color--dark-100 $pf-global--primary-color--dark-100 $pf-color-blue-400 #06c
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--BackgroundColor	#fff
--pf-c-button--m-primary--BackgroundColor --pf-global--BackgroundColor--light-100 $pf-global--BackgroundColor--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--hover--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--hover--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--focus--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--focus--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-primary--active--BackgroundColor	#f0f0f0
--pf-c-button--m-primary--active--BackgroundColor --pf-global--BackgroundColor--light-300 $pf-global--BackgroundColor--light-300 $pf-color-black-200 #f0f0f0
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--Color	#fff
--pf-c-button--m-secondary--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--hover--Color	#fff
--pf-c-button--m-secondary--hover--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--focus--Color	#fff
--pf-c-button--m-secondary--focus--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--active--Color	#fff
--pf-c-button--m-secondary--active--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--BorderColor	#fff
--pf-c-button--m-secondary--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--hover--BorderColor	#fff
--pf-c-button--m-secondary--hover--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--focus--BorderColor	#fff
--pf-c-button--m-secondary--focus--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #fff
	.pf-c-wizard__header .pf-c-button	--pf-c-button--m-secondary--active--BorderColor	#fff
--pf-c-button--m-secondary--active--BorderColor --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #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__header--BackgroundColor --pf-global--BackgroundColor--dark-100 $pf-global--BackgroundColor--dark-100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__header--ZIndex	300
--pf-c-wizard__header--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 300
	.pf-c-wizard	--pf-c-wizard__header--PaddingTop	1.5rem
--pf-c-wizard__header--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__header--PaddingRight	1rem
--pf-c-wizard__header--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--PaddingBottom	1.5rem
--pf-c-wizard__header--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__header--PaddingLeft	1rem
--pf-c-wizard__header--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--lg--PaddingRight	1rem
--pf-c-wizard__header--lg--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--lg--PaddingLeft	1rem
--pf-c-wizard__header--lg--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__header--xl--PaddingRight	1.5rem
--pf-c-wizard__header--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__header--xl--PaddingLeft	1.5rem
--pf-c-wizard__header--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__close--Top	calc(1.5rem - 0.375rem)
--pf-c-wizard__close--Top calc(--pf-global--spacer--lg - --pf-global--spacer--form-element) calc($pf-global--spacer--lg - $pf-global--spacer--form-element) calc(pf-size-prem(24px) - pf-size-prem(6px)) 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__close--xl--Right --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__close--FontSize	1.25rem
--pf-c-wizard__close--FontSize --pf-global--FontSize--xl $pf-global--FontSize--xl pf-font-prem(20px) 1.25rem
	.pf-c-wizard	--pf-c-wizard__title--PaddingRight	3rem
--pf-c-wizard__title--PaddingRight --pf-global--spacer--2xl $pf-global--spacer--2xl pf-size-prem(48px) 3rem
	.pf-c-wizard	--pf-c-wizard__description--PaddingTop	0.5rem
--pf-c-wizard__description--PaddingTop --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__description--Color	#f0f0f0
--pf-c-wizard__description--Color --pf-global--Color--light-200 $pf-global--Color--light-200 $pf-color-black-200 #f0f0f0
	.pf-c-wizard	--pf-c-wizard__nav-link--Color	#151515
--pf-c-wizard__nav-link--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link--TextDecoration	none
--pf-c-wizard__nav-link--TextDecoration --pf-global--link--TextDecoration $pf-global--link--TextDecoration none
	.pf-c-wizard	--pf-c-wizard__nav-link--hover--Color	#06c
--pf-c-wizard__nav-link--hover--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--focus--Color	#06c
--pf-c-wizard__nav-link--focus--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--Color	#06c
--pf-c-wizard__nav-link--m-current--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--FontWeight	400
--pf-c-wizard__nav-link--m-current--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-wizard	--pf-c-wizard__nav-link--m-disabled--Color	#6a6e73
--pf-c-wizard__nav-link--m-disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-wizard	--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight	400
--pf-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight --pf-global--FontWeight--normal $pf-global--FontWeight--normal 400
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle--PaddingRight	0.5rem
--pf-c-wizard__nav-link-toggle--PaddingRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle--PaddingLeft	0.5rem
--pf-c-wizard__nav-link-toggle--PaddingLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle--Color	#6a6e73
--pf-c-wizard__nav-link-toggle--Color --pf-global--Color--200 $pf-global--Color--200 $pf-color-black-600 #6a6e73
	.pf-c-wizard	--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color	#151515
--pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color	#151515
--pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link-toggle-icon--Transition	all 250ms cubic-bezier(.42, 0, .58, 1)
--pf-c-wizard__nav-link-toggle-icon--Transition --pf-global--Transition $pf-global--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__nav-link--before--BackgroundColor --pf-global--BackgroundColor--200 $pf-global--BackgroundColor--200 $pf-color-black-200 #f0f0f0
	.pf-c-wizard	--pf-c-wizard__nav-link--before--BorderRadius	30em
--pf-c-wizard__nav-link--before--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-wizard	--pf-c-wizard__nav-link--before--Color	#151515
--pf-c-wizard__nav-link--before--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard	--pf-c-wizard__nav-link--before--FontSize	0.875rem
--pf-c-wizard__nav-link--before--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-wizard	--pf-c-wizard__nav-link--before--TranslateX	calc(-100% - 0.5rem)
--pf-c-wizard__nav-link--before--TranslateX calc(-100% - --pf-global--spacer--sm) calc(-100% - $pf-global--spacer--sm) calc(-100% - pf-size-prem(8px)) calc(-100% - 0.5rem)
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--before--BackgroundColor	#06c
--pf-c-wizard__nav-link--m-current--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard	--pf-c-wizard__nav-link--m-current--before--Color	#fff
--pf-c-wizard__nav-link--m-current--before--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #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__nav-link--m-disabled--before--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-wizard	--pf-c-wizard__toggle--BackgroundColor	#fff
--pf-c-wizard__toggle--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-wizard	--pf-c-wizard__toggle--ZIndex	300
--pf-c-wizard__toggle--ZIndex --pf-global--ZIndex--md $pf-global--ZIndex--md 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__toggle--BoxShadow --pf-global--BoxShadow--md-bottom $pf-global--BoxShadow--md-bottom 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18) 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__toggle--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__toggle--PaddingRight	1rem
--pf-c-wizard__toggle--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__toggle--PaddingBottom	1.5rem
--pf-c-wizard__toggle--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__toggle--PaddingLeft	calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__toggle--PaddingLeft calc(--pf-global--spacer--md + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--md + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(16px) + 1.5rem + pf-size-prem(8px)) calc(1rem + 1.5rem + 0.5rem)
	.pf-c-wizard	--pf-c-wizard__toggle--m-expanded--BorderBottomWidth	1px
--pf-c-wizard__toggle--m-expanded--BorderBottomWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-wizard	--pf-c-wizard__toggle--m-expanded--BorderBottomColor	#d2d2d2
--pf-c-wizard__toggle--m-expanded--BorderBottomColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-wizard	--pf-c-wizard--m-in-page__toggle--xl--PaddingLeft	calc(2rem + 1.5rem + 0.5rem)
--pf-c-wizard--m-in-page__toggle--xl--PaddingLeft calc(--pf-global--spacer--xl + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--xl + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(32px) + 1.5rem + pf-size-prem(8px)) 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__toggle-list-item--not-last-child--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__toggle-list-item--MarginBottom	0.25rem
--pf-c-wizard__toggle-list-item--MarginBottom --pf-global--spacer--xs $pf-global--spacer--xs pf-size-prem(4px) 0.25rem
	.pf-c-wizard	--pf-c-wizard__toggle-list--MarginRight	0.5rem
--pf-c-wizard__toggle-list--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__toggle-list--MarginBottom	calc(0.25rem * -1)
--pf-c-wizard__toggle-list--MarginBottom calc(--pf-c-wizard__toggle-list-item--MarginBottom * -1) calc(--pf-global--spacer--xs * -1) calc($pf-global--spacer--xs * -1) calc(pf-size-prem(4px) * -1) calc(0.25rem * -1)
	.pf-c-wizard	--pf-c-wizard__toggle-separator--MarginLeft	0.5rem
--pf-c-wizard__toggle-separator--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__toggle-separator--Color	#8a8d90
--pf-c-wizard__toggle-separator--Color --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-wizard	--pf-c-wizard__toggle-icon--LineHeight	1.5
--pf-c-wizard__toggle-icon--LineHeight --pf-global--LineHeight--md $pf-global--LineHeight--md 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__nav--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-wizard	--pf-c-wizard__nav--BackgroundColor	#fff
--pf-c-wizard__nav--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #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__nav--BoxShadow --pf-global--BoxShadow--md-bottom $pf-global--BoxShadow--md-bottom 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .18) 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba(#030303, .18) 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__nav--lg--BorderRightWidth --pf-global--BorderWidth--sm $pf-global--BorderWidth--sm 1px
	.pf-c-wizard	--pf-c-wizard__nav--lg--BorderRightColor	#d2d2d2
--pf-c-wizard__nav--lg--BorderRightColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingTop	1.5rem
--pf-c-wizard__nav-list--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingRight	1rem
--pf-c-wizard__nav-list--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingBottom	1.5rem
--pf-c-wizard__nav-list--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--PaddingLeft	calc(1rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--PaddingLeft calc(--pf-global--spacer--md + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--md + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(16px) + 1.5rem + pf-size-prem(8px)) calc(1rem + 1.5rem + 0.5rem)
	.pf-c-wizard	--pf-c-wizard__nav-list--lg--PaddingTop	1rem
--pf-c-wizard__nav-list--lg--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--lg--PaddingRight	1rem
--pf-c-wizard__nav-list--lg--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--lg--PaddingBottom	1rem
--pf-c-wizard__nav-list--lg--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingTop	1.5rem
--pf-c-wizard__nav-list--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingRight	1.5rem
--pf-c-wizard__nav-list--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingBottom	1.5rem
--pf-c-wizard__nav-list--xl--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__nav-list--xl--PaddingLeft	calc(1.5rem + 1.5rem + 0.5rem)
--pf-c-wizard__nav-list--xl--PaddingLeft calc(--pf-global--spacer--lg + --pf-c-wizard__nav-link--before--Width + --pf-global--spacer--sm) calc($pf-global--spacer--lg + 1.5rem + $pf-global--spacer--sm) calc(pf-size-prem(24px) + 1.5rem + pf-size-prem(8px)) calc(1.5rem + 1.5rem + 0.5rem)
	.pf-c-wizard	--pf-c-wizard__nav-list--nested--MarginLeft	1rem
--pf-c-wizard__nav-list--nested--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-list--nested--MarginTop	1rem
--pf-c-wizard__nav-list--nested--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__nav-item--MarginTop	1rem
--pf-c-wizard__nav-item--MarginTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__outer-wrap--BackgroundColor	#fff
--pf-c-wizard__outer-wrap--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-wizard	--pf-c-wizard__outer-wrap--lg--PaddingLeft	100%
--pf-c-wizard__outer-wrap--lg--PaddingLeft --pf-c-wizard__nav--Width 100%
	.pf-c-wizard	--pf-c-wizard__outer-wrap--MinHeight	15.625rem
	.pf-c-wizard	--pf-c-wizard__main--ZIndex	100
--pf-c-wizard__main--ZIndex --pf-global--ZIndex--xs $pf-global--ZIndex--xs 100
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingTop	1rem
--pf-c-wizard__main-body--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingRight	1rem
--pf-c-wizard__main-body--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingBottom	1rem
--pf-c-wizard__main-body--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--PaddingLeft	1rem
--pf-c-wizard__main-body--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingTop	1.5rem
--pf-c-wizard__main-body--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingRight	1.5rem
--pf-c-wizard__main-body--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingBottom	1.5rem
--pf-c-wizard__main-body--xl--PaddingBottom --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__main-body--xl--PaddingLeft	1.5rem
--pf-c-wizard__main-body--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__footer--BackgroundColor	#fff
--pf-c-wizard__footer--BackgroundColor --pf-global--BackgroundColor--100 $pf-global--BackgroundColor--100 $pf-color-white #fff
	.pf-c-wizard	--pf-c-wizard__footer--ZIndex	200
--pf-c-wizard__footer--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-wizard	--pf-c-wizard__footer--PaddingTop	1rem
--pf-c-wizard__footer--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--PaddingRight	1rem
--pf-c-wizard__footer--PaddingRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--PaddingBottom	0.5rem
--pf-c-wizard__footer--PaddingBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__footer--PaddingLeft	1rem
--pf-c-wizard__footer--PaddingLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingTop	1.5rem
--pf-c-wizard__footer--xl--PaddingTop --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingRight	1.5rem
--pf-c-wizard__footer--xl--PaddingRight --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 1.5rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingBottom	1rem
--pf-c-wizard__footer--xl--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--xl--PaddingLeft	1.5rem
--pf-c-wizard__footer--xl--PaddingLeft --pf-global--spacer--lg $pf-global--spacer--lg pf-size-prem(24px) 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__footer--BoxShadow --pf-global--BoxShadow--sm-top $pf-global--BoxShadow--sm-top 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .16) 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba(#030303, .16) 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__footer--child--MarginRight --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-wizard	--pf-c-wizard__footer--child--MarginBottom	0.5rem
--pf-c-wizard__footer--child--MarginBottom --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-wizard	--pf-c-wizard__footer-cancel--MarginLeft	calc(3rem - 1rem)
--pf-c-wizard__footer-cancel--MarginLeft calc(--pf-global--spacer--2xl - --pf-c-wizard__footer--child--MarginRight) calc($pf-global--spacer--2xl - --pf-global--spacer--md) calc($pf-global--spacer--2xl - $pf-global--spacer--md) calc(pf-size-prem(48px) - pf-size-prem(16px)) 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__nav-link--before--Top --pf-c-wizard__toggle-num--before--Top 0
	.pf-c-wizard__toggle-num	--pf-c-wizard__nav-link--before--BackgroundColor	#06c
--pf-c-wizard__nav-link--before--BackgroundColor --pf-c-wizard__nav-link--m-current--before--BackgroundColor --pf-global--active-color--100 $pf-global--active-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__toggle-num	--pf-c-wizard__nav-link--before--Color	#fff
--pf-c-wizard__nav-link--before--Color --pf-c-wizard__nav-link--m-current--before--Color --pf-global--Color--light-100 $pf-global--Color--light-100 $pf-color-white #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-toggle-icon--Rotate --pf-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate 90deg
	.pf-c-wizard__nav-link:hover	--pf-c-wizard__nav-link--Color	#06c
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--hover--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__nav-link:hover	--pf-c-wizard__nav-link-toggle--Color	#151515
--pf-c-wizard__nav-link-toggle--Color --pf-c-wizard__nav-link--hover__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard__nav-link:focus	--pf-c-wizard__nav-link--Color	#06c
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--focus--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__nav-link:focus	--pf-c-wizard__nav-link-toggle--Color	#151515
--pf-c-wizard__nav-link-toggle--Color --pf-c-wizard__nav-link--focus__nav-link-toggle-icon--Color --pf-global--Color--100 $pf-global--Color--100 $pf-color-black-900 #151515
	.pf-c-wizard__nav-link.pf-m-current	--pf-c-wizard__nav-link--Color	#06c
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--m-current--Color --pf-global--link--Color $pf-global--link--Color $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-wizard__nav-link:disabled	--pf-c-wizard__nav-link--Color	#6a6e73
--pf-c-wizard__nav-link--Color --pf-c-wizard__nav-link--m-disabled--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73
	.pf-c-wizard__nav-link:disabled::before	--pf-c-wizard__nav-link--before--BackgroundColor	transparent
--pf-c-wizard__nav-link--before--BackgroundColor --pf-c-wizard__nav-link--m-disabled--before--BackgroundColor transparent
	.pf-c-wizard__nav-link:disabled::before	--pf-c-wizard__nav-link--before--Color	#6a6e73
--pf-c-wizard__nav-link--before--Color --pf-c-wizard__nav-link--m-disabled--before--Color --pf-global--Color--dark-200 $pf-global--Color--dark-200 $pf-color-black-600 #6a6e73

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines

Wizard

Examples

Basic

Basic with disabled steps

Anchors for nav items

Incrementally enabled steps

Expandable steps

Finished

Enabled on form validation

Validate on button press

Progressive steps

Get current step

Wizard in modal

Wizard with drawer Beta

Props

Wizard

WizardNav

WizardNavItem

WizardHeader

WizardBody

WizardFooter

WizardToggle

WizardStep

CSS variables