Stepper

How to use it

Use at the top of a short linear process of three to six steps, such as checkout or account setup, to show where the user is. Do not use it for content people can visit in any order (use tabs or a sidebar navigation), and keep labels to one or two words. Move aria-current="step" and the state classes as the user advances; if steps should be revisitable, wrap completed labels in links.

Accessibility

The steps are an ordered list inside <nav aria-label="Checkout progress">, so screen readers announce the step count, and the current step carries aria-current="step". Each state is shown three ways besides colour: a check mark or number in the marker, a solid, ringed or dashed marker border, and a visible word (Done, Current, Next). Labels are #0f172a on #ffffff (17.85:1), status words #475569 on #ffffff (7.58:1), the completed marker #ffffff on #1d4ed8 (6.70:1) and the current marker #1d4ed8 on #ffffff (6.70:1).

Source (copy-ready)

Copy code

<nav class="dcl-stepper" aria-label="Checkout progress">
  <ol class="dcl-stepper__list">
    <li class="dcl-stepper__step dcl-stepper__step--done">
      <span class="dcl-stepper__marker" aria-hidden="true">&#10003;</span>
      <span class="dcl-stepper__text"><span class="dcl-stepper__label">Cart</span> <span class="dcl-stepper__status">Done</span></span>
    </li>
    <li class="dcl-stepper__step dcl-stepper__step--done">
      <span class="dcl-stepper__marker" aria-hidden="true">&#10003;</span>
      <span class="dcl-stepper__text"><span class="dcl-stepper__label">Shipping</span> <span class="dcl-stepper__status">Done</span></span>
    </li>
    <li class="dcl-stepper__step dcl-stepper__step--current" aria-current="step">
      <span class="dcl-stepper__marker" aria-hidden="true">3</span>
      <span class="dcl-stepper__text"><span class="dcl-stepper__label">Payment</span> <span class="dcl-stepper__status">Current</span></span>
    </li>
    <li class="dcl-stepper__step dcl-stepper__step--next">
      <span class="dcl-stepper__marker" aria-hidden="true">4</span>
      <span class="dcl-stepper__text"><span class="dcl-stepper__label">Review</span> <span class="dcl-stepper__status">Next</span></span>
    </li>
  </ol>
</nav>
<style>
.dcl-stepper { max-width: 40rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-stepper__list { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.dcl-stepper__step { display: flex; align-items: center; gap: 0.5rem; min-width: 0; color: #0f172a; background-color: #ffffff; }
.dcl-stepper__marker { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid #64748b; font-weight: 700; color: #1d4ed8; background-color: #ffffff; }
.dcl-stepper__step--done .dcl-stepper__marker { border-style: solid; border-color: #1d4ed8; color: #ffffff; background-color: #1d4ed8; }
.dcl-stepper__step--current .dcl-stepper__marker { border-color: #1d4ed8; box-shadow: 0 0 0 3px #bfdbfe; color: #1d4ed8; background-color: #ffffff; }
.dcl-stepper__step--next .dcl-stepper__marker { border-style: dashed; color: #475569; background-color: #ffffff; }
.dcl-stepper__text { display: flex; flex-direction: column; line-height: 1.25; color: #0f172a; background-color: #ffffff; }
.dcl-stepper__label { font-weight: 600; color: #0f172a; background-color: #ffffff; }
.dcl-stepper__step--current .dcl-stepper__label { text-decoration: underline; text-underline-offset: 0.2em; }
.dcl-stepper__status { font-size: 0.8125rem; color: #475569; background-color: #ffffff; }
</style>