Skip to main content

Overview

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

Horizontal Stepper

  • ✓
    Account
    Setup credentials
  • 2
    Profile
    Personal info
  • 3
    Review
    Final confirmation
<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

  • ✓
    Order Placed
    Oct 12, 10:30 AM
  • 2
    Processing
    Item packed and ready
  • 3
    Delivered
    Pending carrier pickup
<ul class="stepper stepper-vertical">
  <li class="step-item completed">
    <div class="step-circle"><span>✓</span></div>
    <div class="step-content">
      <div class="step-title"><span>Order Placed</span></div>
      <div class="step-subtitle"><span>Oct 12, 10:30 AM</span></div>
    </div>
  </li>
  <li class="step-item active">
    <div class="step-circle"><span>2</span></div>
    <div class="step-content">
      <div class="step-title"><span>Processing</span></div>
      <div class="step-subtitle"><span>Item packed and ready</span></div>
    </div>
  </li>
  <li class="step-item">
    <div class="step-circle"><span>3</span></div>
    <div class="step-content">
      <div class="step-title"><span>Delivered</span></div>
      <div class="step-subtitle"><span>Pending carrier pickup</span></div>
    </div>
  </li>
</ul>

Interactive Wizard with JavaScript & Buttons

Wire previous and next buttons directly with data-boodoo-stepper="prev" and data-boodoo-stepper="next":

  • 1
    Account
    Login details
  • 2
    Billing
    Payment method
  • 3
    Confirm
    Ready to launch
Step 1: Enter your account email

Set up your organization credentials.

<!-- Stepper with data-boodoo-target pointing to tab panels -->
<ul class="stepper" id="wizardStepper" data-boodoo-target="#wizardPanels">...</ul>

<button type="button" class="btn btn-outline-secondary" data-boodoo-stepper="prev" data-boodoo-target="#wizardStepper">
  <span>Previous</span>
</button>
<button type="button" class="btn btn-primary" data-boodoo-stepper="next" data-boodoo-target="#wizardStepper">
  <span>Next Step</span>
</button>