Wizard.md

id	Wizard
section	components
cssPrefix	pf-v6-c-wizard
propComponents	Wizard WizardFooter WizardFooterWrapper WizardToggle WizardStep WizardBody WizardHeader WizardNav WizardNavItem WizardContextProps WizardBasicStep WizardParentStep WizardSubStep

import { createContext, useCallback, useContext, useRef, useState } from 'react'; import { FormGroup, TextInput, Drawer, DrawerContent, Button, Title, Flex, Checkbox, DrawerPanelContent, DrawerColorVariant, DrawerHead, DrawerActions, DrawerCloseButton, Modal, ModalVariant, Wizard, WizardFooter, WizardFooterWrapper, WizardToggle, WizardStep, WizardBody, useWizardFooter, useWizardContext, WizardNavItem, WizardNav, WizardHeader } from '@patternfly/react-core'; import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon'; import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon'; import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon'; import styles from '@patternfly/react-styles/css/components/Wizard/wizard'; import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';

Examples

Basic

Plain

Focus content on next/back

To focus the main content element of the Wizard, pass in the shouldFocusContent property. It is recommended that this is passed in so that users can navigate through a WizardStep content in order.

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

Custom footer

Custom navigation item

Toggle step visibility

Step status

Hooks

useWizardContext

Used to access any property of WizardContext:

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

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.

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

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