Stepper
<gcds-stepper>

Also called: progress indicator, steps.

A stepper is a progress tracker for a multi-step process.

• GitHub
• Figma

Take a look at what problems steppers solve to see if they fit the problem you're solving for.

Problems steppers solve

Use a stepper for a logical sequence split over more than one page to:

• Show a person which step they're on in a process, like in a multi-step form.
• Make the structure of a path clear by showing the total number of steps.

Related components

Pagination when a user needs to navigate a range of pages that are not part of a multi-step process. It provides controls to select the next or previous page.