Step Indicators

Last updated:

Practical patterns for progress UI in multi-step flows — named steps and honest state.

01 — Foundation

Steps show progress — not decoration

Users should know where they are, what is done, and what remains.

Step indicators support multi-step flows — checkout, onboarding, wizards. They fail when labels are missing, completed steps lie, or “Step 3 of 9” is the only context. Pair with Multi-Step Forms for navigation and validation.

02 — Markup

Semantic step navigation

Use an ordered list or nav with named steps — not orphaned circles.

  • nav with aria-label — “Checkout progress”, “Application steps”
  • each step has a visible name — “Delivery”, “Payment”, not only a number
  • aria-current="step" on the active step
  • mark completed steps visually and in text — “Completed: Account”; use .vh for status only sighted users infer from styling 
<nav aria-label="Checkout progress">
    <ol>
        <li><span>Account</span> <span class="vh">(completed)</span></li>
        <li aria-current="step">Delivery</li>
        <li>Payment</li>
    </ol>
</nav>

03 — Interaction

Clickable steps and honesty

Let users revisit completed steps when safe — do not fake progress.

  • link or button only to steps already visited or allowed by the flow
  • do not mark future steps complete before validation passes
  • mobile: vertical steppers or condensed labels — horizontal cram fails fast

04 — Accessibility

Accessible progress

Progress is information — announce step changes without spam.

  • move focus to the step heading on advance when it helps orientation
  • do not rely on colour alone for current vs complete states
  • optional aria-valuenow only when the control is a true progressbar — not decorative dots

05 — Review

Before you approve

A short checklist for step indicators in code review.

  • named steps, current step marked, completed steps honest
  • keyboard and screen reader users can follow progress
  • layout works on small screens; pairs with Multi-Step Forms behaviour