Steps

Multi-step progress indicator. One root class — steps — on an <ol>. State via data attributes.

Basic

  1. 1 Cart
  2. 2 Shipping
  3. 3 Payment
  4. 4 Confirm
<ol class="steps" role="list" aria-label="Checkout progress">
  <li data-completed="true"><i>1</i> <span>Cart</span></li>
  <li data-completed="true"><i>2</i> <span>Shipping</span></li>
  <li data-active="true"><i>3</i> <span>Payment</span></li>
  <li><i>4</i> <span>Confirm</span></li>
</ol>

State Attributes

AttributeStateVisual
data-completed="true"DoneSuccess color + checkmark
data-active="true"Current stepPrimary color, filled
(none)UpcomingMuted, outline style

JavaScript Navigation

function goToStep(n) {
  document.querySelectorAll('.steps li').forEach((li, i) => {
    li.removeAttribute('data-active');
    li.removeAttribute('data-completed');
    if (i < n) li.dataset.completed = 'true';
    if (i === n) li.dataset.active = 'true';
  });
}

Accessibility

  • Add aria-label on the <ol> to describe the overall process
  • Add aria-current="step" on the active <li>
  • Use aria-live="polite" on a status element to announce step changes
  • Numbers + labels make progress perceivable without colour

Features

  • Semantic Structure - Built with native HTML5 elements for maximum reliability.
  • Theme Aware - Automatically adapts to all 22 Axiom01 themes via OKLCH tokens.
  • Fully Responsive - Scales perfectly from mobile to desktop screens.
  • No JS Dependency - Core functionality relies on pure CSS for maximum performance.
  • Customizable - Easily extendable via Axiom01's design tokens and modifiers.

Use Cases

The Steps component is designed for versatile implementation across modern web applications. Ideal scenarios include:

  • Dashboards & Admin Panels - Structured data presentation and interface control.
  • Content Management Systems - Organizing complex information hierarchies and media.
  • E-Commerce Platforms - Enhancing product discovery and user workflows.
  • Marketing Sites - Highlighting key product offerings cleanly and effectively.
  • SaaS Applications - Delivering native-feeling, responsive app experiences.