Components

Steps

Compact progress row for checkout, onboarding, and multi-stage flows. Mark the current step with .active; gate future steps with .disabled when the sequence is linear.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing this component.

Default implementation

Three-step flow

Wrap steps in .wckd-steps > .steps, use <a> for each label, place <span class="steps__bg" aria-hidden="true"> as the first child for the chevron fill, set .active on the current step, and use real href values when each step is its own URL.

Start Details Review

Markup

<div class="wckd-steps">
  <div class="steps">
    <a class="active" href="/flow/start"><span class="steps__bg" aria-hidden="true"></span>Start</a>
    <a href="/flow/details"><span class="steps__bg" aria-hidden="true"></span>Details</a>
    <a href="/flow/review"><span class="steps__bg" aria-hidden="true"></span>Review</a>
  </div>
</div>

Configuration options

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

Disabled future steps

For linear wizards, add .disabled on steps the user cannot open yet. Pair with aria-disabled="true" when the control stays an anchor for layout consistency.

Account Shipping Payment

Markup

<div class="wckd-steps">
  <div class="steps">
    <a href="/checkout/account"><span class="steps__bg" aria-hidden="true"></span>Account</a>
    <a class="active" href="/checkout/shipping"><span class="steps__bg" aria-hidden="true"></span>Shipping</a>
    <a class="disabled" href="#" aria-disabled="true"><span class="steps__bg" aria-hidden="true"></span>Payment</a>
  </div>
</div>

When to use

  • Use for checkout or setup flows where users need a fixed sense of progress.
  • Use .disabled when later steps must not be activated until prerequisites are met.

Implementation notes

  • Keep step labels short so the row stays readable on narrow screens.
  • Use true page URLs when each step corresponds to a separate route.
  • Reflect completion and active state with both colour and link semantics.

Developer checklist

  • Use .wckd-steps > .steps and put <span class="steps__bg" aria-hidden="true"> first inside each step <a> (fill + left chevron clip-path).
  • Set exactly one .active step per view unless the design explicitly allows parallel states.
  • If a step is .disabled, avoid meaningful navigation until the step is valid.
  • Disabled steps use pointer-events: none for hit testing; add tabindex="-1" on disabled anchors if you need them skipped in tab order.

← All components