NS Design System
v3.0.0 · 257 tokens

47Stepper

A short labelled flow the reader is currently inside — checkout, onboarding, a quiz. Mono-numbered nodes on a connecting hairline.

Use it for

  • Three to five labelled steps with a clear current position
  • Where the reader needs to know what comes next, not just how far along

Not for

  • A long curriculum — use the Curriculum list
  • An anonymous how-far bar — use Steps
  • More than about five steps: it stops being readable

Vertical

The same flow on its side, for a narrow rail or a checkout summary where the labels are too long to sit side by side.

  1. Account created
  2. 02Payment details
  3. 03Confirm and enrol
markup
<ol class="ns-stepper ns-stepper--vertical">
  <li class="ns-stepper__step" data-state="done"><span class="ns-stepper__node"><i class="ph ph-check-circle" aria-hidden="true"></i></span><span class="ns-stepper__label">Account created</span></li>
  <li class="ns-stepper__line" data-state="done" aria-hidden="true"></li>
  <li class="ns-stepper__step" data-state="current" aria-current="step"><span class="ns-stepper__node">02</span><span class="ns-stepper__label">Payment details</span></li>
  <li class="ns-stepper__line" aria-hidden="true"></li>
  <li class="ns-stepper__step"><span class="ns-stepper__node">03</span><span class="ns-stepper__label">Confirm and enrol</span></li>
</ol>

In progress

  1. Account
  2. 02Payment
  3. 03Confirm
markup
<ol class="ns-stepper">
  <li class="ns-stepper__step" data-state="done"><span class="ns-stepper__node"><i class="ph ph-check-circle" aria-hidden="true"></i></span><span class="ns-stepper__label">Account</span></li>
  <li class="ns-stepper__line" data-state="done" aria-hidden="true"></li>
  <li class="ns-stepper__step" data-state="current" aria-current="step"><span class="ns-stepper__node">02</span><span class="ns-stepper__label">Payment</span></li>
  <li class="ns-stepper__line" aria-hidden="true"></li>
  <li class="ns-stepper__step"><span class="ns-stepper__node">03</span><span class="ns-stepper__label">Confirm</span></li>
</ol>

First step

  1. 01Details
  2. 02Review
  3. 03Done
markup
<ol class="ns-stepper">
  <li class="ns-stepper__step" data-state="current" aria-current="step"><span class="ns-stepper__node">01</span><span class="ns-stepper__label">Details</span></li>
  <li class="ns-stepper__line" aria-hidden="true"></li>
  <li class="ns-stepper__step"><span class="ns-stepper__node">02</span><span class="ns-stepper__label">Review</span></li>
  <li class="ns-stepper__line" aria-hidden="true"></li>
  <li class="ns-stepper__step"><span class="ns-stepper__node">03</span><span class="ns-stepper__label">Done</span></li>
</ol>

Accessibility contract

  • An <ol>, because it is an ordered list of steps
  • aria-current="step" marks position; data-state drives the paint from the same source
  • A done step shows a check instead of its number — the number is no longer the useful information