package.docs.components.Wizard.examples.Wizard.md Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of patternfly Show documentation
Show all versions of patternfly Show documentation
Assets, source, tooling, and content for PatternFly 4
The newest version!
---
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
```
### 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
```
## 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` | `