Progress stepper

Use a progress stepper to communicate to users how many steps are required to complete a process or task. This reduces uncertainty for users as they complete each screen.

A progress stepper should have as few steps as possible in order to reduce cognitive load. A best practice is displaying 3 - 5 steps maximum.

A progress stepper is designed to complement standard previous/next navigation in a linear sequence, not to be a navigation of its own.

If a user attempts to move to another step without resolving any errors first, an inline alert will appear.

When a process or task is completed, users are not able to go back. They must start the process all over again.

When writing text, include minimal content by doing the following:

• Keep the title and description short and specific
• Use between 1 - 3 words for the title and a few words for the description
• Use verbs that clearly communicate each step of the process
• Do not punctuate the title or description because they are fragments and not full sentences

A horizontal progress stepper can be a fixed width or stretch to fill a container.

If space becomes an issue with the horizontal size, switch to the compact size or the vertical orientation.

Always include at least a title so users know what step they are on.

Never remove the title because it will be confusing for users.

Maintain the compact size, it was designed to have less visual prominence.

Do not stretch the compact size. Switch back to the default size or use another orientation.