Steps

When to use it

The Steps component is used as a progress indicator for a certain number of known steps. It is commonly used in multi-step forms or processes to visually indicate the current step and the steps remaining.

Variants

Use the .c-steps--horizontal modifier to display the steps in a horizontal layout. Add .c-steps__num elements to add numbers, letters, or other indicators to each step.

What it looks like

Code examples

Vertical

<ol class="c-steps">
    <li><span>Step number one</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step number two</span></li>
    <li><span>Step number three</span></li>
    <li><span>Step number four</span></li>
</ol>

Large

<ol class="c-steps c-steps--large">
    <li><span>Step one with more text</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step two with more text</span></li>
    <li><span>Step three with more text</span></li>
    <li><span>Step four with more text</span></li>
</ol>

Large, Horizontal

<ol class="c-steps c-steps--large c-steps--horizontal">
    <li><span>Step one</span></li>
    <li class="c-steps__active" aria-current="step"><span>Step two</span></li>
    <li><span>Step three</span></li>
    <li><span>Step four</span></li>
</ol>

Accessibility notes

Make sure to use aria-current="step" to indicate the current step to screen readers.