Stepper

Beta Added in 2.0.0

Steppers indicate progress of a sequence of steps.

Usage

To apply this component, use the following classes.

Class	Description
`.gls-stepper`	Add this class to a `<ol>` element to define the Stepper component. Use `<a>` elements as steps within the list.
`.gls-active`	Add this class to a list item to apply an active state to a step item.

<ol class="gls-stepper">
    <li><a href="#">Step 1</a></li>
    <li class="gls-active"><a href="#">Step 2</a></li>
    <li><a href="#">Step 3</a></li>
</ol>

1. Step 1
2. Step 2
3. Step 3
4. Step 4

<ol class="gls-stepper">
    <li>
        <a href="#" gls-tooltip="Step 1">Step 1</a>
    </li>
    <li class="gls-active">
        <a href="#" gls-tooltip="Step 2">Step 2</a>
    </li>
    <li>
        <a href="#" gls-tooltip="Step 3">Step 3</a>
    </li>
    <li>
        <a href="#" gls-tooltip="Step 4">Step 4</a>
    </li>
</ol>

Guidelines

When to use

To break up a long form or interaction into three or more steps
To communicate how many total steps there are in a process
To reassure the user they’re making progress in a long process
To communicate the success or failure of each step in a process

When to consider something else

Navigation for situations when users do not need to complete all steps of a process
For general page-to-page navigation, use components like the header and breadcrumb navigation
For navigation between the pages of a specific subsection, use a menu
For normal lists, use ordered or unordered lists

Implementation notes

Keep labels short (1-2 words)
Step markers for completed steps should function as links to those completed steps
Avoid providing users with links to future steps before they have completed the current step

Accessibility notes

A step marker must always have a .rvt-steps__label element that contains plain text, regardless of the contents of the .rvt-steps__indicator element
Add the aria-current="step" attribute to a .rvt-steps__item-content element to indicate the current step
Use the aria-hidden="true" attribute to hide .rvt_steps__indicator elements from screen readers if the .rvt_steps__label element already has the number of step in it, like “Step 3”
Put text hidden by the .rvt-sr-only class inside the .rvt-steps__indicator element to communicate a step’s status to users of assistive technologies