Stepper
Last Updated on Sep 29, 2022
A stepper helps users visualize a multi-step process. They provide the user with useful information about progress, status, and requirements in a workflow. They can be linear or nonlinear.

Design Principles

  • Tabular navigation component that helps users visualize and interact with a multi-step process.
  • Use a stepper when you want to give users the ability to manage their progress through a workflow.
  • The stepper provides the user with useful information and helps them interact with a series of tasks at their own pace.
  • Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps.

Do's and Don'ts

Use labels that clearly indicate the purpose of the step.
Requiring a user to complete a linear workflow that includes 3 to 7 large steps.
Always indicate the current step. Keeping the user informed of where they currently are within the process or task at hand will give them a sense of control.
Display the steps in logical progression, from left to right.
Providing a user a sense of the overall workflow complexity while focusing on tasks one at a time.
Use long names for steps, instead be short and concise.
Use a stepper for workflows with fewer than 3 or more than 6 steps.
If a task needs more than 6 steps, consider simplifying the process or breaking it up into smaller tasks.