Stepper
<gcds-stepper>

Also called: progress indicator, steps.

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

• GitHub
• Figma

Build a stepper

Use a stepper to guide users when a sequence (form or process) can be broken down into clear steps and will take up more than one page.

Coding and accessibility for steppers

Use each step for a goal

Use the current-step attribute to indicate the step that the person is on and the total-steps attribute to indicate the overall number of steps.

Placing the stepper on the page

Use the tag attribute to assign the appropriate heading tag to the stepper. The stepper is able to render as either a h1, h2 or h3.

Use valid properties

Component properties have built-in validation. Required properties or properties prone to misuse will be validated. If there are any validation errors, the component will be non-functional and won't render. Review the browser's console for details and adjust the properties accordingly to ensure proper functionality.

Get your code

Generate an instance of the component you need by selecting its code properties.

1. Explore by choosing different code values to generate the instance you want.

2. Get the code and pull it into your environment.

3. Add any copy you need to the component (like text for a label).

Note: The code builder uses English for all code elements, which follows standard practice.