Progress stepper Since v3.1.0

Overview

A progress stepper conveys the steps necessary to complete a process or task, and the status of each step. Steps have titles and descriptions; and each step can be in one of a number of possible states:

• inactive (yet to be performed)
• active (currently being performed)
• warn (succeeded, but with warnings)
• fail (failed to occur) Or a custom state, set using the icon attribute.

Usage guidelines

• Use 3-5 steps maximum to reduce cognitive load
• Designed to complement standard previous/next navigation. Avoid using as the only navigation.
• When process is completed, users cannot go back and must start over

Accessibility

• Communicates list structure and step states to screen readers
• Supports keyboard navigation for linked step titles
• Maintains logical focus order (left to right, top to bottom)
• Provides aria-current for the active step

Also known as: Wizard, Stepper