Stepper

Steppers convey progress through numbered steps. It provides a wizard-like workflow and display progress through a sequence of logical and numbered steps.


Default Stepper

  1. 1
  2. 2
  3. 3
<div class="stepper">
    <ol class="stepper__list">
        <li class="stepper__list-left"><span class="stepper__list-counter">1</span></li>
        <li class="stepper__list-left"><span class="stepper__list-counter">2</span></li>
        <li class="stepper__list-left"><span class="stepper__list-counter">3</span></li>
    </ol>
</div>

Active Stepper

  1. 1
  2. 2
  3. 3
<div class="stepper">
    <ol class="stepper__list">
        <li class="stepper__list-left"><span class="stepper__list-counter active">1</span></li>
        <li class="stepper__list-left"><span class="stepper__list-counter">2</span></li>
        <li class="stepper__list-left"><span class="stepper__list-counter">3</span></li>
    </ol>
</div>

Stepper Step1 Completed

  1. check
  2. 2
  3. 3
<div class="stepper">
    <ol class="stepper__list">
        <li class="stepper__list-left">
            <span class="stepper__list-counter completed"><span class="material-symbols-outlined">check</span></span>
        </li>
        <li class="stepper__list-left"><span class="stepper__list-counter active">2</span></li>
        <li class="stepper__list-left"><span class="stepper__list-counter">3</span></li>
    </ol>
</div>

Stepper with Text

  1. checkOption 1
  2. 2Option 2
  3. 3Option 3
<div class="stepper">
    <ol class="stepper__list">
        <li class="stepper__list-left">
            <span class="stepper__list-counter completed"><span class="material-symbols-outlined">check</span></span><span class="stepper__list-label">Option 1</span>
        </li>
        <li class="stepper__list-left"><span class="stepper__list-counter active">2</span><span class="stepper__list-label">Option 2</span></li>
        <li class="stepper__list-left"><span class="stepper__list-counter">3</span><span class="stepper__list-label">Option 3</span></li>
    </ol>
</div>