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.

A newer React implementation of the wizard will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

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 about the process, visit our about page or 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

Basic with disabled steps

Step 1 content

Anchors for nav items

Step 1: Read about PF3

Incrementally enabled steps

Step 1 content

Expandable steps

Progress after submission

Step 1 content

Enabled on form validation

Information content

Validate on button press

Step 1 content

Progressive steps

Get started content

Get current step

Step 1 content

Step drawer content

Step 1 content

Toggle step visibility

Toggle visibility of the next step

Step error status

Step 1 content

Hooks

useWizardContext

Used to access any property of WizardContext:

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

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

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</>;
}

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	Default	Description
childrenrequired	React.ReactNode \| React.ReactNode[]		Step components
className	string		Additional classes spread to the wizard
footer	WizardFooterType		Wizard footer
header	React.ReactNode		Wizard header
height	number \| string		Custom height of the wizard
isProgressive	boolean	false	Progressively shows steps, where all steps following the active step are hidden. Defaults to false.
isVisitRequired	boolean	false	Disables steps that haven't been visited. Defaults to false.
nav	WizardNavType		Wizard navigation
onClose	(event: React.MouseEvent<HTMLButtonElement>) => void		Callback function to close the wizard
onSave	(event: React.MouseEvent<HTMLButtonElement>) => void \| Promise<void>		Callback function to save at the end of the wizard, if not specified uses onClose
onStepChange	( event: React.MouseEvent<HTMLButtonElement>, currentStep: WizardStepType, prevStep: WizardStepType, scope: WizardStepChangeScope ) => void \| Promise<void>		Callback function when navigating between steps
startIndex	number	1	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	Description
activeSteprequired	WizardStepType	The active step
onBackrequired	(event: React.MouseEvent<HTMLButtonElement>) => void \| Promise<void>	Back button callback
onCloserequired	(event: React.MouseEvent<HTMLButtonElement>) => void	Cancel link callback
onNextrequired	(event: React.MouseEvent<HTMLButtonElement>) => void \| Promise<void>	Next button callback
backButtonText	React.ReactNode	Custom text for the Back button
cancelButtonText	React.ReactNode	Custom text for the Cancel link
isBackDisabled	boolean	Flag to disable the back button
isBackHidden	boolean	True to hide the Back button
isCancelHidden	boolean	True to hide the Cancel button
isNextDisabled	boolean	Flag to disable the next button
nextButtonText	React.ReactNode	Custom text for the Next button. The current step's nextButtonText takes precedence.

WizardFooterWrapper

Applies default wizard footer styling any number of child elements.
*required
Name	Type	Default	Description
childrenrequired	React.ReactNode

WizardToggle

Used to toggle between step content, including the body and footer. This is also where the navigation and its expandability is controlled.
*required
Name	Type	Default	Description
activeSteprequired	WizardStepType		The current step
footerrequired	React.ReactElement		Wizard footer
navrequired	React.ReactElement<WizardNavProps>		Wizard navigation
stepsrequired	WizardStepType[]		List of steps and/or sub-steps
aria-label	string	'Wizard toggle'	The expandable dropdown button's aria-label
isNavExpanded	boolean		Flag to determine whether the dropdown navigation is expanded
toggleNavExpanded	(event: React.MouseEvent<HTMLButtonElement> \| KeyboardEvent) => void		Callback to expand or collapse the dropdown navigation

WizardStep

The primary child component for Wizard. Step props are used for the list of steps managed in context.
*required
Name	Type	Description
idrequired	string \| number	Unique identifier
namerequired	React.ReactNode	Name of the step's navigation item
body	Omit<Omit<WizardBodyProps, 'children'>, 'children'> \| null	Props for WizardBody that wraps content by default. Can be set to null for exclusion of WizardBody.
children	React.ReactNode \| undefined	Optional for when the step is used as a parent to sub-steps
footer	React.ReactElement \| Partial<WizardFooterProps>	Replaces the step's footer. The step's footer takes precedance over the wizard's footer.
isDisabled	boolean	Flag to disable the step's navigation item
isExpandable	boolean	Flag to determine whether parent steps can expand or not. Defaults to false.
isHidden	boolean	Flag to determine whether the step is hidden
navItem	WizardNavItemType	Replaces the step's navigation item or its properties.
status	'default' \| 'error'	Used to determine icon next to the step's navigation item
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
childrenrequired	React.ReactNode \| React.ReactNode[]
aria-label	string		An aria-label to use for the wrapper element
aria-labelledby	string		Sets the aria-labelledby attribute for the wrapper element
component	React.ElementType	'div'	Component used as the wrapping content container
hasNoPadding	boolean	false	Set to true to remove the default body padding

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
isCloseHidden	boolean		Flag indicating whether the close button should be in the header
onClose	(event: React.MouseEvent<HTMLButtonElement>) => 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 navigation element
aria-labelledby	string		Sets the aria-labelledby attribute on the navigation element
children	any		children should be WizardNavItem components
isExpanded	boolean	false	Whether the navigation is expanded
isInnerList	boolean	false	True to return the inner list without the wrapping navigation element

WizardNavItem

*required
Name	Type	Default	Description
stepIndexrequired	number		The step index passed into the onNavItemClick callback
children	React.ReactNode	null	Can nest a WizardNav component for substeps
component	'button' \| 'a'	'button'	Component used to render WizardNavItem
content	React.ReactNode	''	The content to display in the navigation item
href	string		An optional url to use for when using an anchor component
id	string \| number		The id for the navigation item
isCurrent	boolean	false	Whether the navigation item is the currently active item
isDisabled	boolean	false	Whether the navigation item is disabled
isExpandable	boolean	false	Flag indicating that this NavItem has child steps and is expandable
isVisited	boolean	false	Whether the navigation item has been visited
onClick	(event: React.MouseEvent<HTMLButtonElement> \| React.MouseEvent<HTMLAnchorElement>, index: number) => any		Callback for when the navigation item is clicked
ouiaSafe	No type info	true
status	'default' \| 'error'	'default'	Used to determine the icon displayed next to content. Default has no icon.
target	React.HTMLAttributeAnchorTarget		Where to display the linked URL when using an anchor component

WizardContextProps

*required
Name	Type	Description
activeSteprequired	WizardStepType	Current step
closerequired	() => void	Close the wizard
footerrequired	React.ReactElement	Footer element
getSteprequired	(stepId: number \| string) => WizardStepType	Get step by ID
goToNextSteprequired	() => void \| Promise<void>	Navigate to the next step
goToPrevSteprequired	() => void \| Promise<void>	Navigate to the previous step
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
setFooterrequired	(footer: React.ReactElement \| Partial<WizardFooterProps>) => void	Update the footer with any react element
setSteprequired	(step: Pick<WizardStepType, 'id'> & Partial<WizardStepType>) => void	Set step by ID
stepsrequired	WizardStepType[]	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
indexrequired	number	Order index of step (starts at 1)
namerequired	React.ReactNode	Name of the step's navigation item
component	React.ReactElement	Content shown when the step's navigation item is selected. When treated as a parent step, only sub-step content will be shown.
footer	React.ReactElement \| Partial<WizardFooterProps>	Replaces the step's footer. The step's footer takes precedance over the wizard's footer.
isDisabled	boolean	Flag to disable the step's navigation item
isHidden	boolean	Flag to determine whether the step is hidden
isVisited	boolean	Flag to represent whether the step has been visited (navigated to)
navItem	WizardNavItemType	Replaces the step's navigation item or its properties.
status	'default' \| 'error'	Used to determine icon next to the step's navItem

WizardParentStep

Type used to define parent steps.
*required
Name	Type	Default	Description
subStepIdsrequired	(string \| number)[]		Nested step IDs
isExpandable	boolean		Flag to determine whether the step can expand or not.

WizardSubStep

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

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

Basic with disabled steps

Anchors for nav items

Incrementally enabled steps

Expandable steps

Progress after submission

Enabled on form validation

Validate on button press

Progressive steps

Get current step

Step drawer content

Custom navigation

Header

You're a wizard, Harry

Custom footer

Custom navigation item

Toggle step visibility

Step error status

Hooks

useWizardContext

useWizardFooter

Props

Wizard

WizardFooter

WizardFooterWrapper

WizardToggle

WizardStep

WizardBody

WizardHeader

WizardNav

WizardNavItem

WizardContextProps

WizardBasicStep

WizardParentStep

WizardSubStep

CSS variables

Wizard

Info alert:Beta feature

Examples

Basic

Basic with disabled steps

Anchors for nav items

Incrementally enabled steps

Expandable steps

Progress after submission

Enabled on form validation

Validate on button press

Progressive steps

Get current step

Within modal

Step drawer content

Custom navigation

Header

You're a wizard, Harry

Custom footer

Custom navigation item

Toggle step visibility

Step error status

Hooks

useWizardContext

useWizardFooter

Props

Wizard

WizardFooter

WizardFooterWrapper

WizardToggle

WizardStep

WizardBody

WizardHeader

WizardNav

WizardNavItem

WizardContextProps

WizardBasicStep

WizardParentStep

WizardSubStep

CSS variables