Components

Steps

Chevron row: .wckd-steps > .steps with a steps (first child of each link: span.steps__bg with aria-hidden="true"). Current: .active; locked future steps: .disabled.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Three-step flow

Each step is an a with span.steps__bg first (aria-hidden="true"); one .active; use real hrefs per route.

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

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

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="/checkout/payment" 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