Stepper
<gcds-stepper>

Also called: progress indicator, steps.

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

• GitHub
• Figma

Stepper anatomy

1. The current step indicates the step the person's on in the process.
2. The total steps indicates the number of steps overall in the process.
3. The step title describes the type of information that will be asked in the step.

Design and accessibility for steppers

Always include the step title after the stepper

The step title and the stepper are a heading on the page. This is a H1, H2, or H3, depending on the heading hierarchy of the page.

Assign a goal to each step in your sequence

• Choose a step title that reflects the goal of each step.
• Make sure the actions in each step support the stated goal.