Stepper

Multi-step task

<ol class="dsgn-steps" aria-label="New invoice">
  <li data-state="done"><span class="dsgn-steps-label">Client</span><span class="dsgn-visually-hidden">, completed</span></li>
  <li aria-current="step"><span class="dsgn-steps-label">Items</span></li><li><span class="dsgn-steps-label">Review</span></li><li><span class="dsgn-steps-label">Send</span></li></ol>

Usage

An ordered list, so "3 items" and the position are announced; aria-current="step" marks where the user is. For a finished step add a hidden word if the check alone is not enough:

Marker = one control line-height circle: number (upcoming), accent ring (current), filled accent with a check (done). Connectors fill the space between. When the list is narrower than 32rem only the current label stays visible (others are visually hidden, still read by screen readers).

Details

Classes

.dsgn-steps .dsgn-steps-label

Tokens used

--dsgn-border --dsgn-border-strong --dsgn-border-width --dsgn-control-font-size --dsgn-control-line-height --dsgn-control-solid --dsgn-control-solid-text --dsgn-control-text --dsgn-font-icon --dsgn-font-sans --dsgn-font-size-body-s --dsgn-font-size-caption --dsgn-font-weight-medium --dsgn-font-weight-semibold --dsgn-icon-grade --dsgn-radius-full --dsgn-space-16 --dsgn-space-2 --dsgn-space-8 --dsgn-text --dsgn-text-muted

In Figma

Stepper · Step

Import alone

dsgn.systems/components/steps.css