@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,245 lines (1,230 loc) • 144 kB
Markdown
---
id: Wizard
section: components
cssPrefix: pf-v6-c-wizard
wrapperTag: div
---import './Wizard.css'
## Examples
### Basic
```html isFullscreen
<div class="pf-v6-c-wizard">
<div class="pf-v6-c-wizard__header">
<div class="pf-v6-c-wizard__close">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Close"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-wizard__title">
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
</div>
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
</div>
<button
aria-label="Wizard Header Toggle"
class="pf-v6-c-wizard__toggle"
aria-expanded="false"
>
<span class="pf-v6-c-wizard__toggle-list">
<span class="pf-v6-c-wizard__toggle-list-item">
<span class="pf-v6-c-wizard__toggle-num">2</span>
Configuration
<i
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
aria-hidden="true"
></i>
</span>
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
</span>
<span class="pf-v6-c-wizard__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v6-c-wizard__outer-wrap">
<div class="pf-v6-c-wizard__inner-wrap">
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-expanded="true"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
<span class="pf-v6-c-wizard__nav-link-toggle">
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</span>
</button>
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-current="page"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
</span>
</button>
</li>
</ol>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Additional</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button" disabled>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Review</span>
</span>
</button>
</li>
</ol>
</nav>
<main class="pf-v6-c-wizard__main" tabindex="0">
<div class="pf-v6-c-wizard__main-body">
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-basic-form-field1"
>
<span class="pf-v6-c-form__label-text">Field 1</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-basic-form-field1"
name="wizard-basic-form-field1"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-basic-form-field2"
>
<span class="pf-v6-c-form__label-text">Field 2</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-basic-form-field2"
name="wizard-basic-form-field2"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-basic-form-field3"
>
<span class="pf-v6-c-form__label-text">Field 3</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-basic-form-field3"
name="wizard-basic-form-field3"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-basic-form-field4"
>
<span class="pf-v6-c-form__label-text">Field 4</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-basic-form-field4"
name="wizard-basic-form-field4"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-basic-form-field5"
>
<span class="pf-v6-c-form__label-text">Field 5</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-basic-form-field5"
name="wizard-basic-form-field5"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-basic-form-field6"
>
<span class="pf-v6-c-form__label-text">Field 6</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-basic-form-field6"
name="wizard-basic-form-field6"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-basic-form-field7"
>
<span class="pf-v6-c-form__label-text">Field 7</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-basic-form-field7"
name="wizard-basic-form-field7"
/>
</span>
</div>
</div>
</form>
</div>
</main>
</div>
<footer class="pf-v6-c-wizard__footer">
<div class="pf-v6-c-action-list">
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-secondary" type="button">
<span class="pf-v6-c-button__text">Back</span>
</button>
</div>
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-primary" type="button">
<span class="pf-v6-c-button__text">Next</span>
</button>
</div>
</div>
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-link" type="button">
<span class="pf-v6-c-button__text">Cancel</span>
</button>
</div>
</div>
</div>
</footer>
</div>
</div>
```
### Nav expanded (mobile)
```html isFullscreen
<div class="pf-v6-c-wizard">
<div class="pf-v6-c-wizard__header">
<div class="pf-v6-c-wizard__close">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Close"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-wizard__title">
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
</div>
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
</div>
<button
aria-label="Wizard Header Toggle"
class="pf-v6-c-wizard__toggle pf-m-expanded"
aria-expanded="true"
>
<span class="pf-v6-c-wizard__toggle-list">
<span class="pf-v6-c-wizard__toggle-list-item">
<span class="pf-v6-c-wizard__toggle-num">2</span>
Configuration
<i
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
aria-hidden="true"
></i>
</span>
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
</span>
<span class="pf-v6-c-wizard__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v6-c-wizard__outer-wrap">
<div class="pf-v6-c-wizard__inner-wrap">
<nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-expanded="true"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
<span class="pf-v6-c-wizard__nav-link-toggle">
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</span>
</button>
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-current="page"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
</span>
</button>
</li>
</ol>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Additional</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button" disabled>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Review</span>
</span>
</button>
</li>
</ol>
</nav>
<main class="pf-v6-c-wizard__main" tabindex="0">
<div class="pf-v6-c-wizard__main-body">
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-nav-expanded-form-field1"
>
<span class="pf-v6-c-form__label-text">Field 1</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-nav-expanded-form-field1"
name="wizard-nav-expanded-form-field1"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-nav-expanded-form-field2"
>
<span class="pf-v6-c-form__label-text">Field 2</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-nav-expanded-form-field2"
name="wizard-nav-expanded-form-field2"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-nav-expanded-form-field3"
>
<span class="pf-v6-c-form__label-text">Field 3</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-nav-expanded-form-field3"
name="wizard-nav-expanded-form-field3"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-nav-expanded-form-field4"
>
<span class="pf-v6-c-form__label-text">Field 4</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-nav-expanded-form-field4"
name="wizard-nav-expanded-form-field4"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-nav-expanded-form-field5"
>
<span class="pf-v6-c-form__label-text">Field 5</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-nav-expanded-form-field5"
name="wizard-nav-expanded-form-field5"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-nav-expanded-form-field6"
>
<span class="pf-v6-c-form__label-text">Field 6</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-nav-expanded-form-field6"
name="wizard-nav-expanded-form-field6"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-nav-expanded-form-field7"
>
<span class="pf-v6-c-form__label-text">Field 7</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-nav-expanded-form-field7"
name="wizard-nav-expanded-form-field7"
/>
</span>
</div>
</div>
</form>
</div>
</main>
</div>
<footer class="pf-v6-c-wizard__footer">
<div class="pf-v6-c-action-list">
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-secondary" type="button">
<span class="pf-v6-c-button__text">Back</span>
</button>
</div>
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-primary" type="button">
<span class="pf-v6-c-button__text">Next</span>
</button>
</div>
</div>
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-link" type="button">
<span class="pf-v6-c-button__text">Cancel</span>
</button>
</div>
</div>
</div>
</footer>
</div>
</div>
```
### With drawer
```html isFullscreen
<div class="pf-v6-c-wizard">
<div class="pf-v6-c-wizard__header">
<div class="pf-v6-c-wizard__close">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Close"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-wizard__title">
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
</div>
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
</div>
<button
aria-label="Wizard Header Toggle"
class="pf-v6-c-wizard__toggle"
aria-expanded="false"
>
<span class="pf-v6-c-wizard__toggle-list">
<span class="pf-v6-c-wizard__toggle-list-item">
<span class="pf-v6-c-wizard__toggle-num">2</span>
Configuration
<i
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
aria-hidden="true"
></i>
</span>
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
</span>
<span class="pf-v6-c-wizard__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v6-c-wizard__outer-wrap">
<div class="pf-v6-c-wizard__inner-wrap">
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-expanded="true"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
<span class="pf-v6-c-wizard__nav-link-toggle">
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</span>
</button>
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-current="page"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
</span>
</button>
</li>
</ol>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Additional</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button" disabled>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Review</span>
</span>
</button>
</li>
</ol>
</nav>
<main class="pf-v6-c-wizard__main" tabindex="0">
<div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
<div class="pf-v6-c-drawer__main">
<div class="pf-v6-c-drawer__content">
<div class="pf-v6-c-wizard__main-body">
<button
class="pf-v6-c-button pf-v6-u-hidden pf-v6-u-float-right pf-v6-u-ml-md pf-m-inline pf-m-link"
type="button"
>
<span class="pf-v6-c-button__text">Open drawer</span>
</button>
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-with-drawer-example-form-field1"
>
<span class="pf-v6-c-form__label-text">Field 1</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-with-drawer-example-form-field1"
name="wizard-with-drawer-example-form-field1"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-with-drawer-example-form-field2"
>
<span class="pf-v6-c-form__label-text">Field 2</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-with-drawer-example-form-field2"
name="wizard-with-drawer-example-form-field2"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-with-drawer-example-form-field3"
>
<span class="pf-v6-c-form__label-text">Field 3</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-with-drawer-example-form-field3"
name="wizard-with-drawer-example-form-field3"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-with-drawer-example-form-field4"
>
<span class="pf-v6-c-form__label-text">Field 4</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-with-drawer-example-form-field4"
name="wizard-with-drawer-example-form-field4"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-with-drawer-example-form-field5"
>
<span class="pf-v6-c-form__label-text">Field 5</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-with-drawer-example-form-field5"
name="wizard-with-drawer-example-form-field5"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-with-drawer-example-form-field6"
>
<span class="pf-v6-c-form__label-text">Field 6</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-with-drawer-example-form-field6"
name="wizard-with-drawer-example-form-field6"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-with-drawer-example-form-field7"
>
<span class="pf-v6-c-form__label-text">Field 7</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-with-drawer-example-form-field7"
name="wizard-with-drawer-example-form-field7"
/>
</span>
</div>
</div>
</form>
</div>
</div>
<div class="pf-v6-c-drawer__panel pf-m-width-33">
<div class="pf-v6-c-drawer__body">
<div class="pf-v6-c-drawer__head">
<div class="pf-v6-c-drawer__actions">
<div class="pf-v6-c-drawer__close">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Close drawer panel"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</button>
</div>
</div>drawer-panel
</div>
</div>
</div>
</div>
<footer class="pf-v6-c-wizard__footer">
<div class="pf-v6-c-action-list">
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-secondary" type="button">
<span class="pf-v6-c-button__text">Back</span>
</button>
</div>
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-primary" type="button">
<span class="pf-v6-c-button__text">Next</span>
</button>
</div>
</div>
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-link" type="button">
<span class="pf-v6-c-button__text">Cancel</span>
</button>
</div>
</div>
</div>
</footer>
</div>
</main>
</div>
</div>
</div>
```
### Expandable collapsed
```html isFullscreen
<div class="pf-v6-c-wizard">
<div class="pf-v6-c-wizard__header">
<div class="pf-v6-c-wizard__close">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Close"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-wizard__title">
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
</div>
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
</div>
<button
aria-label="Wizard Header Toggle"
class="pf-v6-c-wizard__toggle"
aria-expanded="false"
>
<span class="pf-v6-c-wizard__toggle-list">
<span class="pf-v6-c-wizard__toggle-list-item">
<span class="pf-v6-c-wizard__toggle-num">2</span>
Configuration
<i
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
aria-hidden="true"
></i>
</span>
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
</span>
<span class="pf-v6-c-wizard__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v6-c-wizard__outer-wrap">
<div class="pf-v6-c-wizard__inner-wrap">
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-current="page"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item pf-m-expandable">
<button
class="pf-v6-c-wizard__nav-link"
type="button"
aria-expanded="false"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
<span class="pf-v6-c-wizard__nav-link-toggle">
<span class="pf-v6-c-wizard__nav-link-toggle-icon">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
</span>
</span>
</button>
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep A</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep B</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Substep C</span>
</span>
</button>
</li>
</ol>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Additional</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button" disabled>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Review</span>
</span>
</button>
</li>
</ol>
</nav>
<main class="pf-v6-c-wizard__main" tabindex="0">
<div class="pf-v6-c-wizard__main-body">
<form class="pf-v6-c-form pf-m-limit-width" novalidate>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-expandable-collapsed-form-field1"
>
<span class="pf-v6-c-form__label-text">Field 1</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-expandable-collapsed-form-field1"
name="wizard-expandable-collapsed-form-field1"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-expandable-collapsed-form-field2"
>
<span class="pf-v6-c-form__label-text">Field 2</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-expandable-collapsed-form-field2"
name="wizard-expandable-collapsed-form-field2"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-expandable-collapsed-form-field3"
>
<span class="pf-v6-c-form__label-text">Field 3</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-expandable-collapsed-form-field3"
name="wizard-expandable-collapsed-form-field3"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-expandable-collapsed-form-field4"
>
<span class="pf-v6-c-form__label-text">Field 4</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-expandable-collapsed-form-field4"
name="wizard-expandable-collapsed-form-field4"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-expandable-collapsed-form-field5"
>
<span class="pf-v6-c-form__label-text">Field 5</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-expandable-collapsed-form-field5"
name="wizard-expandable-collapsed-form-field5"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-expandable-collapsed-form-field6"
>
<span class="pf-v6-c-form__label-text">Field 6</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-expandable-collapsed-form-field6"
name="wizard-expandable-collapsed-form-field6"
/>
</span>
</div>
</div>
<div class="pf-v6-c-form__group">
<div class="pf-v6-c-form__group-label"><label
class="pf-v6-c-form__label"
for="wizard-expandable-collapsed-form-field7"
>
<span class="pf-v6-c-form__label-text">Field 7</span> <span
class="pf-v6-c-form__label-required"
aria-hidden="true"
>*</span></label>
</div>
<div class="pf-v6-c-form__group-control">
<span class="pf-v6-c-form-control">
<input
type="text"
id="wizard-expandable-collapsed-form-field7"
name="wizard-expandable-collapsed-form-field7"
/>
</span>
</div>
</div>
</form>
</div>
</main>
</div>
<footer class="pf-v6-c-wizard__footer">
<div class="pf-v6-c-action-list">
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-secondary" type="button">
<span class="pf-v6-c-button__text">Back</span>
</button>
</div>
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-primary" type="button">
<span class="pf-v6-c-button__text">Next</span>
</button>
</div>
</div>
<div class="pf-v6-c-action-list__group">
<div class="pf-v6-c-action-list__item">
<button class="pf-v6-c-button pf-m-link" type="button">
<span class="pf-v6-c-button__text">Cancel</span>
</button>
</div>
</div>
</div>
</footer>
</div>
</div>
```
### Expandable expanded
```html isFullscreen
<div class="pf-v6-c-wizard">
<div class="pf-v6-c-wizard__header">
<div class="pf-v6-c-wizard__close">
<button
class="pf-v6-c-button pf-m-plain"
type="button"
aria-label="Close"
>
<span class="pf-v6-c-button__icon">
<i class="fas fa-times" aria-hidden="true"></i>
</span>
</button>
</div>
<div class="pf-v6-c-wizard__title">
<h1 class="pf-v6-c-wizard__title-text">Wizard title</h1>
</div>
<div class="pf-v6-c-wizard__description">Here is where the description goes</div>
</div>
<button
aria-label="Wizard Header Toggle"
class="pf-v6-c-wizard__toggle"
aria-expanded="false"
>
<span class="pf-v6-c-wizard__toggle-list">
<span class="pf-v6-c-wizard__toggle-list-item">
<span class="pf-v6-c-wizard__toggle-num">2</span>
Configuration
<i
class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
aria-hidden="true"
></i>
</span>
<span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
</span>
<span class="pf-v6-c-wizard__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v6-c-wizard__outer-wrap">
<div class="pf-v6-c-wizard__inner-wrap">
<nav class="pf-v6-c-wizard__nav" aria-label="Steps">
<ol class="pf-v6-c-wizard__nav-list" role="list">
<li class="pf-v6-c-wizard__nav-item">
<button class="pf-v6-c-wizard__nav-link" type="button">
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Information</span>
</span>
</button>
</li>
<li class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded">
<button
class="pf-v6-c-wizard__nav-link pf-m-current"
type="button"
aria-expanded="true"
>
<span class="pf-v6-c-wizard__nav-link-main">
<span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
<span class="pf-v6-