Stepper

Multi-step progress indicator for signup flows, checkouts, onboarding wizards, multi-part forms. Horizontal (default) for compact flows, vertical when each step needs a description. Three states per step: --complete, --active, default (upcoming). Optional --error state for steps that failed validation.

a11y (built in): the stepper is an ordered list — <ol class="lb-stepper"> with aria-label — so step position and total come from the markup, and the current step carries aria-current="step". Glyph indicator bubbles — the check and x marks — are aria-hidden and the connector lines are ::after pseudo-elements, so completed/error state is announced by a .lb-visually-hidden state span after each step label — "(completed)", "(has an error)" — the pattern every demo on this page ships; numeric indicators stay plain text beside the step label. Clickable steps are real <button class="lb-stepper__trigger"> elements with their own aria-label and native disabled for steps that aren't reachable yet; the focus ring lands on the indicator.

Usage: <ol class="lb-stepper"> (horizontal default, add --vertical for stacked). Each <li class="lb-stepper__step"> holds a .lb-stepper__indicator (number or check SVG) and a .lb-stepper__label. Wrap the step in a .lb-stepper__trigger button if steps are clickable (e.g. letting users revisit completed steps).

Horizontal — 4 steps

Account setup flow. Two complete, one active, one upcoming.

  1. Account (completed)
  2. Organization (completed)
  3. 3 Plan
  4. 4 Invite

Horizontal — 3 steps

Checkout flow, first step active.

  1. 1 Shipping
  2. 2 Payment
  3. 3 Review

Vertical — with descriptions

Use when each step benefits from explanation. Label sits next to the indicator; optional description on a second line.

  1. Create account

    Signed up with work email on April 22.

  2. Connect design tool

    Figma plugin authorised and synced.

  3. 3

    Import your first tokens

    Export `source-tokens.json` from the letbe plugin and upload it here to see your brand applied across every component.

  4. 4

    Invite your team

    Share the workspace with designers and engineers.

  5. 5

    Deploy

    Publish to npm or host the gallery on your CDN.

Error state

Signal that a step failed validation — e.g. form submission came back with errors from the server.

  1. Basics (completed)
  2. Payment (has an error)
  3. 3 Confirm

Clickable steps

Wrap a step in a <button class="lb-stepper__trigger"> to let users jump back to a previous step. Focus ring + hover halo appear. Future upcoming steps should remain disabled to prevent skipping.

Small — dense contexts

Smaller indicators for inline / compact placements (inside a toolbar, sidebar widget).

  1. Profile (completed)
  2. 2 Team
  3. 3 Done