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.

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.

PatternFly has two implementations of a Wizard. This newer Wizard takes a more explicit and declarative approach compared to the older implementation, which can be found under the React tab.

Examples

Basic

Step 1 content

The Wizard's nav property can be used to build your own navigation.

/** Callback for the Wizard's 'nav' property. Returns element which replaces the Wizard's default navigation. */
export type CustomWizardNavFunction = (
  isOpen: boolean,
  steps: WizardControlStep[],
  activeStep: WizardControlStep,
  goToStepByIndex: (index: number) => void
) => React.ReactElement<WizardNavProps>;

/** Encompasses all step type variants that are internally controlled by the Wizard */
type WizardControlStep = WizardBasicStep | WizardParentStep | WizardSubStep;

Kitchen sink

Includes a header, custom footer, sub-steps, step content with a drawer, custom nav item, and nav prevention until step visitation.

Custom operations when navigating between steps can be achieved by utilizing onNext, onBack or onNavByIndex properties whose callback functions return the 'id' and 'name' of the currently focused step (currentStep), and the previously focused step (previousStep).

/** Callback for the Wizard's 'onNext', 'onBack', and 'onNavByIndex' properties */
type WizardNavStepFunction = (currentStep: WizardNavStepData, previousStep: WizardNavStepData) => void;

/** Data returned for either parameter of WizardNavStepFunction */
type WizardNavStepData = Pick<WizardControlStep, 'id' | 'name'>;

Text input label

Hooks

useWizardFooter

Used to set a unique footer for the wizard on any given step. See step 3 of Kitchen sink for a live example.

import { useWizardFooter } from '@patternfly/react-core/next';

const StepContent = () => {
  useWizardFooter(<>Some footer</>);
  return <>Step content</>;
}

useWizardContext

Used to access any property of WizardContext:

import { useWizardContext } from '@patternfly/react-core/next';

const StepContent = () => {
  const { activeStep } = useWizardContext();
  return <>This is the active step: {activeStep}</>;
}

Props

Wizard

Wrapper for all steps and hosts state, including navigation helpers, within context. The WizardContext provided by default gives any child of wizard access to those resources.
*required
Name	Type	Description
childrenrequired	React.ReactElement<WizardStepProps> \| React.ReactElement<WizardStepProps>[]	Step components
className	string	Additional classes spread to the wizard
footer	DefaultWizardFooterProps \| React.ReactElement	Wizard footer
header	React.ReactNode	Wizard header
height	number \| string	Custom height of the wizard
nav	DefaultWizardNavProps \| CustomWizardNavFunction	Default wizard nav props or a custom WizardNav (with callback)
onBack	WizardNavStepFunction	Callback function after back button is clicked
onClose	() => void	Callback function to close the wizard
onNavByIndex	WizardNavStepFunction	Callback function when a step in the nav is clicked
onNext	WizardNavStepFunction	Callback function after next button is clicked
onSave	() => void	Callback function to save at the end of the wizard, if not specified uses onClose
startIndex	number	The initial index the wizard is to start on (1 or higher). Defaults to 1.
width	number \| string	Custom width of the wizard

WizardFooter

Hosts the standard structure of a footer with ties to the active step so that text for buttons can vary from step to step.
*required
Name	Type	Default	Description
activeSteprequired	WizardControlStep		The currently active WizardStep
onBackrequired	() => WizardNavStepFunction \| void		Back button callback
onCloserequired	() => void		Cancel link callback
onNextrequired	() => WizardNavStepFunction \| void		Next button callback
backButtonText	React.ReactNode	'Back'	Custom text for the Back button
cancelButtonText	React.ReactNode	'Cancel'	Custom text for the Cancel link
disableBackButton	boolean		Optional flag to disable the first step's back button
nextButtonText	React.ReactNode	'Next'	Custom text for the Next button. The activeStep's nextButtonText takes precedence.

WizardToggle

Used to toggle between step content, including the body and footer. This is also where the nav and its expandability is controlled.
*required
Name	Type	Default	Description
activeSteprequired	WizardControlStep		The currently active WizardStep
footerrequired	React.ReactElement		The WizardFooter
goToStepByIndexrequired	(index: number) => void		Navigate using the step index
navrequired	DefaultWizardNavProps \| CustomWizardNavFunction		Custom WizardNav or callback used to create a default WizardNav
stepsrequired	WizardControlStep[]		List of steps and/or sub-steps
aria-label	string	'Wizard toggle'	The button's aria-label
unmountInactiveSteps	boolean	true	Flag to unmount inactive steps instead of hiding. Defaults to true

WizardStep

Used as a passthrough of step properties for Wizard and all supporting child components. Also acts as a wrapper for content, with an optional inclusion of WizardBody.
*required
Name	Type	Description
body	WizardBodyProps \| null	Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody.
children	React.ReactNode	Optional for when the step is used as a parent to sub-steps
steps	React.ReactElement<WizardStepProps>[]	Optional list of sub-steps

WizardBody

Used as a wrapper for WizardStep content, where the wrapping element is customizable.
*required
Name	Type	Default	Description
aria-label	string		An aria-label to use for the wrapper element
aria-labelledby	string		Sets the aria-labelledby attribute for the wrapper element
children	React.ReactNode \| React.ReactNode[]
hasNoBodyPadding	boolean	false	Set to true to remove the default body padding
wrapperElement	React.ElementType	'div'	Component used as the wrapping content container

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

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

WizardContextProps

*required
Name	Type	Description
activeSteprequired	WizardControlStep	Active step
footerrequired	React.ReactElement	Footer element
goToStepByIdrequired	(id: number \| string) => void	Navigate to step by ID
goToStepByIndexrequired	(index: number) => void	Navigate to step by index
goToStepByNamerequired	(name: string) => void	Navigate to step by name
onBackrequired	() => void	Navigate to the previous step
onCloserequired	() => void	Close the wizard
onNextrequired	() => void	Navigate to the next step
setFooterrequired	(footer: React.ReactElement) => void	Update the footer with any react element
stepsrequired	WizardControlStep[]	List of steps

WizardBasicStep

Type used to define 'basic' steps, or in other words, steps that are neither parents or children of parents.
*required
Name	Type	Description
idrequired	string \| number	Unique identifier
namerequired	React.ReactNode	Name of the step's nav item
component	React.ReactElement	Content shown when the step's nav item is selected. When treated as a parent step, only sub-step content will be shown.
disableNext	boolean	(Unused if footer is controlled) The condition needed to disable 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
isDisabled	boolean	Flag to disable the step's nav item
navItem	React.ReactElement<WizardNavItemProps>	(Unused if nav is controlled) Custom WizardNavItem
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.
visited	boolean	Flag to represent whether the step has been visited (navigated to)

WizardParentStep

Type used to define parent steps.
*required
Name	Type	Default	Description
subStepIdsrequired	string[]		Nested step IDs

WizardSubStep

Type used to define sub-steps.
*required
Name	Type	Default	Description
parentIdrequired	string \| number		Unique identifier of the parent step

DefaultWizardNavProps

Used to customize aspects of the Wizard's default navigation.
*required
Name	Type	Description
ariaLabel	string	Aria-label for the Nav
ariaLabelledBy	string	Sets aria-labelledby on nav element
forceStepVisit	boolean	Disable step nav items until they are visited
isExpandable	boolean	Flag indicating nav items with sub steps are expandable

DefaultWizardFooterProps

Used to customize aspects of the Wizard's default footer.
*required
Name	Type	Description
backButtonText	React.ReactNode	The Back button text
cancelButtonText	React.ReactNode	The Cancel button text
nextButtonText	React.ReactNode	The Next button text

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

Info alert:Beta feature

Examples

Basic

Custom navigation

Kitchen sink

You're a wizard, Harry

Hooks

useWizardFooter

useWizardContext

Props

Wizard

WizardFooter

WizardToggle

WizardStep

WizardBody

WizardHeader

WizardNav

WizardNavItem

WizardContextProps

WizardBasicStep

WizardParentStep

WizardSubStep

DefaultWizardNavProps

DefaultWizardFooterProps

CSS variables