--- id: Wizard section: components cssPrefix: pf-v6-c-wizard wrapperTag: div ---import './Wizard.css' ## Examples ### Basic ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Nav expanded (mobile) ```html isFullscreen

Wizard title

Here is where the description goes
``` ### With drawer ```html isFullscreen

Wizard title

Here is where the description goes
drawer-panel
``` ### Expandable collapsed ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Expandable expanded ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Finished ```html isFullscreen

Wizard title

Here is where the description goes

Validating credentials

Description can be used to further elaborate on the validation step, or give the user a better idea of how long the process will take.
``` ### Error on step ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Nav expanded with error (mobile) ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Success on step ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Nav expanded with success (mobile) ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Warning on step ```html isFullscreen

Wizard title

Here is where the description goes
``` ### Nav expanded with warning (mobile) ```html isFullscreen

Wizard title

Here is where the description goes
``` ## Documentation ### Accessibility | Attribute | Applied to | Outcome | | -- | -- | -- | | `aria-expanded="true"` | `.pf-v6-c-wizard__toggle` | Indicates that the steps menu is visible. **Required** | | `aria-expanded="false"` | `.pf-v6-c-wizard__toggle` | Indicates that the steps menu is hidden. **Required** | | `aria-label="close"` | `.pf-v6-c-wizard__toggle-icon` | Gives the close button an accessible name. **Required** | | `aria-hidden="true"` | `.pf-v6-c-wizard__toggle-icon`, `.pf-v6-c-wizard__toggle-divider` | Hides the icon from assistive technologies. **Required** | | `aria-label="Steps"` | `.pf-v6-c-wizard__nav` | Gives the steps nav element an accessible name. **Required** | | `disabled` | `button.pf-v6-c-wizard__nav-link` | Indicates that the element is disabled. **Required when a nav item is disabled** | | `aria-disabled="true"` | `a.pf-v6-c-wizard__nav-link` | Indicates that the element is disabled. **Required for disabled links with `.pf-m-disabled`** | | `aria-current="page"` | `.pf-v6-c-wizard__nav-link` | Indicates the current page link. Can only occur once on page. **Required for the current link** | | `aria-expanded="true"` | `.pf-v6-c-wizard__nav-link` | Indicates that the link subnav is visible. **Required** | | `aria-expanded="false"` | `.pf-v6-c-wizard__nav-link` | Indicates that the link subnav is hidden. **Required** | | `tabindex="-1"` | `a.pf-v6-c-wizard__nav-link` | Removes a link from keyboard focus. **Required for disabled links with `.pf-m-disabled`** | | `tabindex="0"` | `.pf-v6-c-wizard__main` | If the wizard main section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the section must include either a focusable element within the scrollable region or the section itself must be focusable by adding `tabindex="0"`. | ### Usage | Class | Applied to | Outcome | | -- | -- | -- | | `.pf-v6-c-wizard` | `
` | Initiates the wizard component. **Required** | | `.pf-v6-c-wizard__header` | `
` | Initiates the header. **Required** when the wizard is in a modal. Not recommended to use when the wizard is placed on a page. | | `.pf-v6-c-wizard__close` | `
` | Initiates the close button. **Required** | | `.pf-v6-c-wizard__title` | `
` | Initiates the title container. **Required** | | `.pf-v6-c-wizard__title-text` | `

`, `

`, `

`, `

`, `

`, `
`, `
` | Initiates the wizard title text. | | `.pf-v6-c-wizard__description` | `
`, `

` | Initiates the description. | | `.pf-v6-c-wizard__toggle` | `