Skip to content
PatternFly logo

Wizard

A wizard provides a guided workflow that offers a path to complete a task, create an object or objects, or finish a series of steps for some other outcome. Wizards should incite trust in the user and guide them through an otherwise overwhelming experience.

A newer React implementation of the wizard will replace the existing implementation at the next major release. The documentation for the newer implementation is under the React next tab, and this newer implementation can be imported from @patternfly/react-core/next.

Demos

Basic

Basic screenshot
Nav expanded (mobile) screenshot

With drawer, closed

With drawer, closed screenshot

With drawer, expanded

With drawer, expanded screenshot

With drawer and informational step

With drawer and informational step screenshot

In page

In page screenshot

In page nav expanded (mobile)

In page nav expanded (mobile) screenshot

With drawer, in page

With drawer, in page screenshot

With drawer, in page, expanded

With drawer, in page, expanded screenshot

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines