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