Overview

The Stepper component conveys progress through numbered or labeled steps in a multi-step form, wizard, or checkout experience.

Horizontal Stepper

<ul class="stepper">
  <li class="step-item completed">
    <div class="step-circle">✓</div>
    <div class="step-content">
      <div class="step-title">Account</div>
      <div class="step-subtitle">Setup credentials</div>
    </div>
  </li>
  <li class="step-item active">
    <div class="step-circle">2</div>
    <div class="step-content">
      <div class="step-title">Profile</div>
      <div class="step-subtitle">Personal info</div>
    </div>
  </li>
  <li class="step-item">
    <div class="step-circle">3</div>
    <div class="step-content">
      <div class="step-title">Review</div>
      <div class="step-subtitle">Final confirmation</div>
    </div>
  </li>
</ul>

Vertical Stepper