HomeFoundationsComponents
AccordionAction IconBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
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.
View Figma ComponentView MAF Storybook

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.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
Progress BarTabs
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.