Stepper

Bootstrap 5 Stepper / Wizard component

Responsive stepper built with Bootstrap 5. Form wizard, vertical stepper, multi step form validation, optional step, mobile stepper & more

Stepper is a component that displays content as a process with defined by user milestones. This is a great solution for a variety of registration forms, where you don't want to scare the user with lots of fields and questions.

In this documentation, you can find examples of form wizard, vertical stepper, horizontal stepper, multi step form, mobile stepper, validation & more.

Note: Read the API tab to find all available options and advanced customization

Required ES init: Stepper *
* UMD autoinits are enabled by default. This means that you don't need to initialize the component manually. However if you are using MDBootstrap ES format then you should pass the required components to the initMDB method.

Basic example

You can automatically initialize the stepper component using data-mdb-stepper-init attribute.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init>
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, initMDB } from "mdb-ui-kit";

initMDB({ Stepper });

Change steps using external elements

To go to the next or previous step, you can use the nextStep and prevStep methods. You can also choose a specific step using the changeStep method by entering the step index.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
Edit in sandbox 
<div class="mb-3">
  <button id="prev-step" class="btn btn-primary" data-mdb-ripple-init>prev</button>
  <button id="step-1" class="btn btn-primary" data-mdb-ripple-init>step1</button>
  <button id="step-2" class="btn btn-primary" data-mdb-ripple-init>step2</button>
  <button id="step-3" class="btn btn-primary" data-mdb-ripple-init>step3</button>
  <button id="next-step" class="btn btn-primary" data-mdb-ripple-init>next</button>
</div>
<div>
  <ul class="stepper" id="stepper-buttons">
    <li class="stepper-step stepper-active">
      <div class="stepper-head">
        <span class="stepper-head-icon">1</span>
        <span class="stepper-head-text">step1</span>
      </div>
      <div class="stepper-content py-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
        incididunt ut labore et dolore magna aliqua
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon">2</span>
        <span class="stepper-head-text">step2</span>
      </div>
      <div class="stepper-content py-3">
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon">3</span>
        <span class="stepper-head-text">step3</span>
      </div>
      <div class="stepper-content py-3">
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
        fugiat nulla pariatur
      </div>
    </li>
  </ul>
</div>
// Initialization for ES Users
import { Stepper, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Ripple });

const stepper = new Stepper(document.getElementById('stepper-buttons'));

document.getElementById('next-step').addEventListener('click', () => {
  stepper.nextStep();
});

document.getElementById('prev-step').addEventListener('click', () => {
  stepper.prevStep();
});

document.getElementById('step-1').addEventListener('click', () => {
  stepper.changeStep(0);
});

document.getElementById('step-2').addEventListener('click', () => {
  stepper.changeStep(1);
});

document.getElementById('step-3').addEventListener('click', () => {
  stepper.changeStep(2);
});
const stepper = new mdb.Stepper(document.getElementById('stepper-buttons'));

document.getElementById('next-step').addEventListener('click', () => {
  stepper.nextStep();
});

document.getElementById('prev-step').addEventListener('click', () => {
  stepper.prevStep();
});

document.getElementById('step-1').addEventListener('click', () => {
  stepper.changeStep(0);
});

document.getElementById('step-2').addEventListener('click', () => {
  stepper.changeStep(1);
});

document.getElementById('step-3').addEventListener('click', () => {
  stepper.changeStep(2);
});

Linear stepper

If you want to use basic validation before advancing to the next step you can set data-mdb-stepper-linear="true"

  • 1 step1
    invalid
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-linear="true">
  <form class="needs-validation stepper-form" novalidate>
    <li class="stepper-step stepper-active">
      <div class="stepper-head">
        <span class="stepper-head-icon">1</span>
        <span class="stepper-head-text">step1</span>
      </div>
      <div class="stepper-content py-3">
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="linear-stepper-input-1" class="form-control" required />
          <label class="form-label" for="linear-stepper-input-1">step 1</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon">2</span>
        <span class="stepper-head-text">step2</span>
      </div>
      <div class="stepper-content py-3">
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="linear-stepper-input-2" class="form-control" required />
          <label class="form-label" for="linear-stepper-input-2">step 2</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon">3</span>
        <span class="stepper-head-text">step3</span>
      </div>
      <div class="stepper-content py-3">
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="linear-stepper-input-3" class="form-control" required />
          <label class="form-label" for="linear-stepper-input-3">step 3</label>
          <div class="invalid-feedback">invalid</div>
        </div>
        <button class="btn btn-primary" type="submit" data-mdb-ripple-init>Submit</button>
      </div>
    </li>
  </form>
</ul>
// Initialization for ES Users
import { Stepper, Input, initMDB } from "mdb-ui-kit";

initMDB({ Stepper, Input });

No editable stepper

You can set data-mdb-stepper-no-editable="true" to prevent editing a completed step.

  • 1 step1
    invalid
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-no-editable="true">
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="no-editable-stepper-input-1" class="form-control" required />
          <label class="form-label" for="no-editable-stepper-input-1">step 1</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="no-editable-stepper-input-2" class="form-control" required />
          <label class="form-label" for="no-editable-stepper-input-2">step 2</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="no-editable-stepper-input-3" class="form-control" required />
          <label class="form-label" for="no-editable-stepper-input-3">step 3</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, Input, initMDB } from "mdb-ui-kit";

initMDB({ Stepper, Input });

Vertical stepper

Set data-mdb-stepper-type="vertical" to use the vertical view.

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 3 step3
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-type="vertical">
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      <span>
        Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
        dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
      </span>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      <span>
        Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
        dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
      </span>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      <span>
        Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
        dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
      </span>
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, initMDB } from "mdb-ui-kit";

initMDB({ Stepper });

Mobile stepper

Set data-mdb-stepper-type="mobile" to use mobile view.

    step 1 of 3
  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-type="mobile">
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, initMDB } from "mdb-ui-kit";

initMDB({ Stepper });

Mobile stepper progress bar

if the stepper contains more than 4 steps, the progress bar will be displayed by default instead of dots. You can edit the step limit with the stepper-mobile-bar-breakpoint attribute.

    step 1 of 12
  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-type="mobile">
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, initMDB } from "mdb-ui-kit";

initMDB({ Stepper });

Stepper with gesture support

Adding Touch Swipe utils to the stepper enables changing the stepper step using gestures.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init>
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
      incididunt ut labore et dolore magna aliqua
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
      ex ea commodo consequat
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
      fugiat nulla pariatur
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, Touch, initMDB } from "mdb-ui-kit";
initMDB({ Stepper });

const stepper = document.querySelector('.stepper')

const stepperInstance = Stepper.getOrCreateInstance(stepper);
const touchSwipeLeftRight = new Touch(stepper, 'swipe', {
  threshold: 100
});

stepper.addEventListener('swipeleft', () => {
  stepperInstance.nextStep();
});
stepper.addEventListener('swiperight', () => {
  stepperInstance.prevStep();
});
// Initialization for ES Users
const stepper = document.querySelector('.stepper')

const stepperInstance = mdb.Stepper.getOrCreateInstance(stepper);
const touchSwipeLeftRight = new mdb.Touch(stepper, 'swipe', {
  threshold: 100
});

stepper.addEventListener('swipeleft', () => {
  stepperInstance.nextStep();
});
stepper.addEventListener('swiperight', () => {
  stepperInstance.prevStep();
});

Optional step

You can mark a step as optional by adding data-mdb-stepper-optional="true" to it.

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init>
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      <span>
        Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
        dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
      </span>
    </div>
  </li>
  <li class="stepper-step" data-mdb-stepper-optional="true">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      <span>
        Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
        dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
      </span>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      <span>
        Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
        dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
      </span>
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, initMDB } from "mdb-ui-kit";

initMDB({ Stepper });

Custom icons

if you want to use an icon instead of a step number you can do it by placing it inside <span class="stepper-head-icon"></span>

  • step1
    invalid
  • step2
  • step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init>
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">
        <i class="fas fa-user"></i>
      </span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="custom-icon-input-1" class="form-control" required />
          <label class="form-label" for="custom-icon-input-1">step 1</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">
        <i class="fas fa-envelope"></i>
      </span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="custom-icon-input-2" class="form-control" required />
          <label class="form-label" for="custom-icon-input-2">step 2</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      </span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="custom-icon-input-3" class="form-control" required />
          <label class="form-label" for="custom-icon-input-3">step 3</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, Input, initMDB } from "mdb-ui-kit";

initMDB({ Stepper, Input });

Form wizard

An example of so-called "Form wizard" with multiple inputs on each step.

  • 1 step1
    invalid
    invalid
  • 2 step2
  • 3 step3
Edit in sandbox 
<!-- Form wizrd -->
<div>
  <!-- Steps -->
  <ul class="stepper" id="stepper-form-example" data-mdb-stepper-linear="true">
    <form class="needs-validation stepper-form">
      <!-- First step -->
      <li class="stepper-step stepper-active">
        <div class="stepper-head">
          <span class="stepper-head-icon">1</span>
          <span class="stepper-head-text">step1</span>
        </div>
        <div class="stepper-content py-3">
          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="text" id="stepper-form-first-name" class="form-control" required/>
            <label class="form-label" for="stepper-form-first-name">First name<small class="text-muted">(required)</small></label>
            <div class="invalid-feedback">invalid</div>
          </div>

          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="text" id="stepper-form-last-name" class="form-control" required/>
            <label class="form-label" for="stepper-form-last-name">Last name<small class="text-muted">(required)</small></label>
            <div class="invalid-feedback">invalid</div>
          </div>

          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="text" id="stepper-form-last-name" class="form-control" />
            <label class="form-label" for="stepper-form-last-name">Nickname<small class="text-muted">(optional)</small></label>
          </div>
        </div>
      </li>
      <!-- First step -->

      <!-- Second step -->
      <li class="stepper-step">
        <div class="stepper-head">
          <span class="stepper-head-icon">2</span>
          <span class="stepper-head-text">step2</span>
        </div>
        <div class="stepper-content py-3">
          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="text" id="form6Example3" class="form-control" required />
            <label class="form-label" for="form6Example3">Company name<small class="text-muted">(required)</small></label>
            <div class="invalid-feedback">invalid</div>
          </div>

          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="text" id="form6Example4" class="form-control" required />
            <label class="form-label" for="form6Example4">Address<small class="text-muted">(required)</small></label>
            <div class="invalid-feedback">invalid</div>
          </div>

          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="email" id="form6Example5" class="form-control" required />
            <label class="form-label" for="form6Example5">Email<small class="text-muted">(required)</small></label>
            <div class="invalid-feedback">invalid</div>
          </div>

          <div class="form-outline mb-4" data-mdb-input-init>
            <input type="number" id="form6Example6" class="form-control" />
            <label class="form-label" for="form6Example6">Phone<small class="text-muted">(optional)</small></label>
            <div class="invalid-feedback">invalid</div>
          </div>
        </div>
      </li>
      <!-- Second step -->

      <!-- Third step -->
      <li class="stepper-step">
        <div class="stepper-head">
          <span class="stepper-head-icon">3</span>
          <span class="stepper-head-text">step3</span>
        </div>
        <div class="stepper-content py-3">
          <div class="form-outline mb-4" data-mdb-input-init>
            <textarea class="form-control" id="form6Example7" rows="4"></textarea>
            <label class="form-label" for="form6Example7">Additional information</label>
          </div>

          <div class="form-check d-flex justify-content-center mb-4">
            <input class="form-check-input me-2" type="checkbox" value="" id="form6Example8" checked/>
            <label class="form-check-label" for="form6Example8">Create an account?</label>
          </div>

          <button type="submit" class="btn btn-success btn-block mb-4" data-mdb-ripple-init>Place order</button>
        </div>
      </li>
      <!-- Third step -->
    </form>
  </ul>
  <!-- Steps -->

  <!-- Buttons -->
  <div class="d-flex justify-content-center px-3">
    <button id="form-example-prev-step" class="btn btn-primary w-100 me-2" data-mdb-ripple-init>Previous step</button>
    <button id="form-example-next-step" class="btn btn-primary w-100" data-mdb-ripple-init>Next step</button>
  </div>
  <!-- Buttons -->
</div>
<!-- Form wizrd -->
// Initialization for ES Users
import { Stepper, Input, Ripple, initMDB } from "mdb-ui-kit";
initMDB({ Input, Ripple });

const stepper = new Stepper(document.getElementById('stepper-form-example'));

document.getElementById('form-example-next-step').addEventListener('click', () => {
  stepper.nextStep();
});

document.getElementById('form-example-prev-step').addEventListener('click', () => {
  stepper.prevStep();
});
const stepper = new mdb.Stepper(document.getElementById('stepper-form-example'));

document.getElementById('form-example-next-step').addEventListener('click', () => {
  stepper.nextStep();
});

document.getElementById('form-example-prev-step').addEventListener('click', () => {
  stepper.prevStep();
});

Toggle to vertical or mobile on smaller screens

If you want to change the view from horizontal to vertical or mobile with smaller screens you can use the data-mdb-stepper-vertical-breakpoint and data-mdb-stepper-mobile-breakpoint attribute specifying the number of pixels at which the stepper should change to vertical or mobile. You can resize the browser window to test it.

  • step1
    invalid
  • step2
  • step3
Edit in sandbox 
<ul
  class="stepper"
  data-mdb-stepper-init
  data-mdb-stepper-vertical-breakpoint="768"
  data-mdb-stepper-mobile-breakpoint="400"
>
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">
        <i class="fas fa-user"></i>
      </span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="toggle-to-vertical-input-1" class="form-control" required />
          <label class="form-label" for="toggle-to-vertical-input-1">step 1</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">
        <i class="fas fa-envelope"></i>
      </span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="toggle-to-vertical-input-2" class="form-control" required />
          <label class="form-label" for="toggle-to-vertical-input-2">step 2</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step" data-mdb-stepper-optional="true">
    <div class="stepper-head">
      <span class="stepper-head-icon">
        <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
      </span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="toggle-to-vertical-input-3" class="form-control" required />
          <label class="form-label" for="toggle-to-vertical-input-3">step 3</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, Input, initMDB } from "mdb-ui-kit";

initMDB({ Stepper, Input });

Events

Stepper emits events after successful step validation, failed step validation, before and after changing to another step. Check the browser console and try to change the step to see the result.

  • 1 step1
    invalid
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-linear="true">
  <li class="stepper-step stepper-active">
    <div class="stepper-head">
      <span class="stepper-head-icon">1</span>
      <span class="stepper-head-text">step1</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="events-input-1" class="form-control" required />
          <label class="form-label" for="events-input-1">step 1</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">2</span>
      <span class="stepper-head-text">step2</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="events-input-2" class="form-control" required />
          <label class="form-label" for="events-input-2">step 2</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
  <li class="stepper-step">
    <div class="stepper-head">
      <span class="stepper-head-icon">3</span>
      <span class="stepper-head-text">step3</span>
    </div>
    <div class="stepper-content py-3">
      <form class="needs-validation" novalidate>
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="events-input-3" class="form-control" required />
          <label class="form-label" for="events-input-3">step 3</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </form>
    </div>
  </li>
</ul>
// Initialization for ES Users
import { Stepper, Input, initMDB } from "mdb-ui-kit";

initMDB({ Stepper, Input });

document.querySelector('#linear-stepper .stepper').addEventListener('stepValid.mdb.stepper', (e) => {
  console.log('stepValid', e);
});

document.querySelector('#linear-stepper .stepper').addEventListener('stepInvalid.mdb.stepper', (e) => {
  console.log('stepInvalid', e);
});

document.querySelector('#linear-stepper .stepper').addEventListener('stepChange.mdb.stepper', (e) => {
  console.log('stepChange', e);
});

document.querySelector('#linear-stepper .stepper').addEventListener('stepChanged.mdb.stepper', (e) => {
  console.log('stepChanged', e);
});
document.querySelector('#linear-stepper .stepper').addEventListener('stepValid.mdb.stepper', (e) => {
  console.log('stepValid', e);
});

document.querySelector('#linear-stepper .stepper').addEventListener('stepInvalid.mdb.stepper', (e) => {
  console.log('stepInvalid', e);
});

document.querySelector('#linear-stepper .stepper').addEventListener('stepChange.mdb.stepper', (e) => {
  console.log('stepChange', e);
});

document.querySelector('#linear-stepper .stepper').addEventListener('stepChanged.mdb.stepper', (e) => {
  console.log('stepChanged', e);
});

Add custom validation

You can use the stepChange.mdb.stepper event to use your own validation.

  • 1 step1
    Password should have 5 or more characters
  • 2 step2
  • 3 step3
Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init data-mdb-stepper-linear="true">
  <form class="needs-validation stepper-form" novalidate>
    <li class="stepper-step stepper-active">
      <div class="stepper-head">
        <span class="stepper-head-icon">1</span>
        <span class="stepper-head-text">step1</span>
      </div>
      <div class="stepper-content py-3">
        <div class="form-outline" data-mdb-input-init>
          <input type="password" id="custom-validation-input-1" class="form-control" required />
          <label class="form-label" for="custom-validation-input-1">password</label>
          <div class="invalid-feedback">Password should have 5 or more characters</div>
        </div>
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon">2</span>
        <span class="stepper-head-text">step2</span>
      </div>
      <div class="stepper-content py-3">
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="custom-validation-input-2" class="form-control" required />
          <label class="form-label" for="custom-validation-input-2">step 2</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </div>
    </li>
    <li class="stepper-step">
      <div class="stepper-head">
        <span class="stepper-head-icon">3</span>
        <span class="stepper-head-text">step3</span>
      </div>
      <div class="stepper-content py-3">
        <div class="form-outline" data-mdb-input-init>
          <input type="text" id="custom-validation-input-3" class="form-control" required />
          <label class="form-label" for="custom-validation-input-3">step 3</label>
          <div class="invalid-feedback">invalid</div>
        </div>
      </div>
    </li>
  </form>
</ul>
// Initialization for ES Users
import { Stepper, Input, initMDB } from "mdb-ui-kit";

initMDB({ Stepper, Input });

document.querySelector('.stepper .stepper-step').addEventListener('stepChange.mdb.stepper', (e) => {
  const input = e.target.querySelector('.stepper-content input[type="password"]');
  const inputLenght = input.value.length;
  if (inputLenght < 5) {
    e.target.querySelector('input').setCustomValidity('Invalid');
    e.preventDefault();
  } else {
    e.target.querySelector('input').setCustomValidity('');
  }
});
document.querySelector('.stepper .stepper-step').addEventListener('stepChange.mdb.stepper', (e) => {
  const input = e.target.querySelector('.stepper-content input[type="password"]');
  const inputLenght = input.value.length;
  if (inputLenght < 5) {
    e.target.querySelector('input').setCustomValidity('Invalid');
    e.preventDefault();
  } else {
    e.target.querySelector('input').setCustomValidity('');
  }
});

Stepper - API

Import

Importing components depends on how your application works. If you intend to use the MDBootstrap ES format, you must first import the component and then initialize it with the initMDB method. If you are going to use the UMD format, just import the mdb-ui-kit package.

Edit in sandbox 
import { Stepper, initMDB } from "mdb-ui-kit";

initMDB({ Stepper });
import "mdb-ui-kit"

Usage

Via data attributes

Using the Stepper component doesn't require any additional JavaScript code - simply add data-mdb-stepper-init attribute to .stepper and use other data attributes to set all options. For ES format, you must first import and call the initMDB method.

Edit in sandbox 
<ul class="stepper" data-mdb-stepper-init>
  ...
</ul>

Via JavaScript

Edit in sandbox 
const element = document.querySelector('.stepper');
const stepper = new Stepper(element);
const element = document.querySelector('.stepper');
const stepper = new mdb.Stepper(element);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own.

Edit in sandbox 
$(document).ready(() => {
  $('#stepper').stepper();
});

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-stepper-type="horizontal".

Name Type Default Description
animations Boolean true Set to false to turn off the animations displayed when step changes
stepperType String 'horizontal' Sets stepper view. Available types are: horizontal, vertical and mobile
stepperLinear Boolean false Set to true to use the linear stepper
stepperNoEditable Boolean false Set to true to block editing of the completed step
stepperHeadClick Boolean true Set to false to block the possibility of changing a step by clicking on another step
stepperActive String '' Sets a custom active class
stepperCompleted String '' Sets a custom completed class
stepperInvalid String '' Sets a custom invalid class
stepperDisabled String '' Sets a custom disabled class
stepperOptional Boolean false Sets a optional step.
stepperVerticalBreakpoint Number 0 Sets the resolution below which the stepper will switch to vertical
stepperMobileBreakpoint Number 0 Sets the resolution below which the stepper will switch to mobile
stepperMobileBarBreakpoint Number 4 Sets the step limit after which the progress bar will appear in the mobile view instead of the dots
stepperMobileNextBtn String 'NEXT' Sets custom text for the NEXT button
stepperMobileBackBtn String 'BACK' Sets custom text for the BACK button
stepperMobileStepTxt String 'step' Sets custom step value in the mobile stepper head
stepperMobileOfTxt String 'of' Sets custom of value in the mobile stepper head

Methods

Name Description Example
dispose Removes mdb.Stepper instance. stepper.dispose()
changeStep Switch to the step given as the parameter stepper.changeStep()
getInstance Static method which allows you to get the stepper instance associated to a DOM element. Stepper.getInstance(myStepperEl)
getOrCreateInstance Static method which returns the stepper instance associated to a DOM element or create a new one in case it wasn't initialized. Stepper.getOrCreateInstance(myStepperEl)
nextStep Switch to the next step stepper.nextStep()
prevStep Switch to the previous step stepper.prevStep()
resizeStepper Reset the height and view of the stepper stepper.resizeStepper()
Edit in sandbox 
const myStepperEl = document.getElementById('stepper');
const stepper = new Stepper(myStepperEl);
stepper.nextStep();
const myStepperEl = document.getElementById('stepper');
const stepper = new mdb.Stepper(myStepperEl);
stepper.nextStep();

Events

Name Description
stepChange.mdb.stepper This event is emitted before the step change takes place. By using e.preventDefault() you can implement custom validation. Information about the current and next steps can be accessed through the following properties of the emitted event: e.currentStep and e.nextStep.
stepChanged.mdb.stepper This event is emitted after the step change takes place. Information about the current and previous steps can be accessed through the following properties of the emitted event: e.currentStep and e.prevStep.
stepValid.mdb.stepper This event is emitted after successful step validation. Information about the current and next steps can be accessed through the following properties of the emitted event: e.currentStep and e.nextStep.
stepInvalid.mdb.stepper This event is emitted after unsuccessful step validation. Information about the current and next steps can be accessed through the following properties of the emitted event: e.currentStep and e.nextStep.
Edit in sandbox 
const stepper = document.querySelector('.stepper');
stepper.addEventListener('stepChange.mdb.stepper', () => {
  // do something...
});

CSS variables

As part of MDB’s evolving CSS variables approach, stepper now use local CSS variables on .stepper for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

Edit in sandbox 
// .steps
--#{$prefix}steps-transition: #{$steps-transition};

// .steps-step
--#{$prefix}steps-step-after-left: #{$steps-step-after-left};
--#{$prefix}steps-step-after-width: #{$steps-step-after-width};
--#{$prefix}steps-step-after-margin-top: #{$steps-step-after-margin-top};
--#{$prefix}steps-step-after-bg: #{$steps-step-after-bg};

// .steps-content
--#{$prefix}steps-content-padding-y: #{$steps-content-padding-y};

// .steps-head-vertical
--#{$prefix}steps-head-vertical-padding-top: #{$steps-head-vertical-padding-top};
--#{$prefix}steps-head-vertical-padding-x: #{$steps-head-vertical-padding-x};

// .steps-head-icon-vertical
--#{$prefix}steps-head-icon-vertical-margin-right: #{$steps-head-icon-vertical-margin-right};

// .steps-head
--#{$prefix}steps-head-line-height: #{$steps-head-line-height};
--#{$prefix}steps-head-hover-bgc: #{$steps-head-hover-bgc};

// .steps-head-text
--#{$prefix}steps-head-text-color: #{$steps-head-text-color};
--#{$prefix}steps-head-text-after-font-size: #{$steps-head-text-after-font-size};

// .steps-head-icon
--#{$prefix}steps-head-icon-font-size: #{$steps-head-icon-font-size};
--#{$prefix}steps-head-icon-width: #{$steps-head-icon-width};
--#{$prefix}steps-head-icon-height: #{$steps-head-icon-height};
--#{$prefix}steps-head-icon-font-weight: #{$steps-head-icon-font-weight};

// .steps-active-head-text
--#{$prefix}steps-active-head-text-font-weight: #{$steps-active-head-text-font-weight};

// .stepper
--#{$prefix}stepper-padding-x: #{$stepper-padding-x};
--#{$prefix}stepper-step-height: #{$stepper-step-height};
--#{$prefix}stepper-step-head-padding-left: #{$stepper-step-head-padding-left};
--#{$prefix}stepper-step-head-padding-right: #{$stepper-step-head-padding-right};
--#{$prefix}stepper-step-head-height: #{$stepper-step-head-height};
--#{$prefix}stepper-step-head-bg: #{$stepper-step-head-bg};
--#{$prefix}stepper-step-head-margin-right: #{$stepper-step-head-margin-right};
--#{$prefix}stepper-step-head-margin-left: #{$stepper-step-head-margin-left};
--#{$prefix}stepper-head-icon-margin-y: #{$stepper-head-icon-margin-y};
--#{$prefix}stepper-head-icon-margin-right: #{$stepper-head-icon-margin-right};
--#{$prefix}stepper-vertical-step-top: #{$stepper-vertical-step-top};
--#{$prefix}stepper-vertical-step-height: #{$stepper-vertical-step-height};
--#{$prefix}stepper-vertical-content-padding-left: #{$stepper-vertical-content-padding-left};
--#{$prefix}stepper-vertical-content-transition: #{$stepper-vertical-content-transition};
--#{$prefix}stepper-vertical-head-padding-bottom: #{$stepper-vertical-head-padding-bottom};
--#{$prefix}stepper-mobile-step-margin-y: #{$stepper-mobile-step-margin-y};
--#{$prefix}stepper-mobile-step-head-padding-x: #{$stepper-mobile-step-head-padding-x};
--#{$prefix}stepper-mobile-head-icon-height: #{$stepper-mobile-head-icon-height};
--#{$prefix}stepper-mobile-head-icon-width: #{$stepper-mobile-head-icon-width};
--#{$prefix}stepper-mobile-content-top: #{$stepper-mobile-content-top};
--#{$prefix}stepper-mobile-active-head-icon-bg: #{$stepper-mobile-active-head-icon-bg};
--#{$prefix}stepper-mobile-completed-head-icon-bg: #{$stepper-mobile-completed-head-icon-bg};
--#{$prefix}stepper-head-icon-bg: #{$stepper-head-icon-bg};
--#{$prefix}stepper-head-icon-color: #{$stepper-head-icon-color};
--#{$prefix}stepper-completed-head-icon-bg: #{$stepper-completed-head-icon-bg};
--#{$prefix}stepper-completed-head-icon-color: #{$stepper-completed-head-icon-color};
--#{$prefix}stepper-active-head-icon-bg: #{$stepper-active-head-icon-bg};
--#{$prefix}stepper-active-head-icon-color: #{$stepper-active-head-icon-color};
--#{$prefix}stepper-invalid-head-icon-bg: #{$stepper-invalid-head-icon-bg};
--#{$prefix}stepper-invalid-head-icon-color: #{$stepper-invalid-head-icon-color};
--#{$prefix}stepper-disabled-head-color: #{$stepper-disabled-head-color};
--#{$prefix}stepper-disabled-head-icon-bg: #{$stepper-disabled-head-icon-bg};
--#{$prefix}stepper-disabled-head-icon-color: #{$stepper-disabled-head-icon-color};
--#{$prefix}stepper-mobile-head-padding-y: #{$stepper-mobile-head-padding-y};
--#{$prefix}stepper-mobile-head-padding-x: #{$stepper-mobile-head-padding-x};
--#{$prefix}stepper-mobile-footer-height: #{$stepper-mobile-footer-height};
--#{$prefix}stepper-back-btn-i-margin-right: #{$stepper-back-btn-i-margin-right};
--#{$prefix}stepper-next-btn-i-margin-left: #{$stepper-next-btn-i-margin-left};
--#{$prefix}stepper-mobile-progress-bar-height: #{$stepper-mobile-progress-bar-height};
--#{$prefix}stepper-mobile-progress-height: #{$stepper-mobile-progress-height};
--#{$prefix}stepper-mobile-progress-background-color: #{$stepper-mobile-progress-background-color};
--#{$prefix}stepper-mobile-active-progress-bar-color: #{$stepper-mobile-active-progress-bar-color};
--#{$prefix}stepper-mobile-footer-bg: #{$stepper-mobile-footer-bg};
--#{$prefix}stepper-mobile-head-bg: #{$stepper-mobile-head-bg};
--#{$prefix}stepper-mobile-invalid-icon-bg: #{$stepper-mobile-invalid-icon-bg};

SCSS variables

Edit in sandbox 
// Steps
$steps-transition: height 0.2s ease-in-out;

$steps-step-after-left: 2.45rem;
$steps-step-after-width: 1px;
$steps-step-after-margin-top: 0.5rem;
$steps-step-after-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.1);

$steps-content-padding-y: 1.5rem;

$steps-head-vertical-padding-top: 1.5rem;
$steps-head-vertical-padding-x: 1.5rem;

$steps-head-icon-vertical-margin-right: 0.75rem;

$steps-head-line-height: 1.3;
$steps-head-hover-bgc: rgba(var(--#{$prefix}emphasis-color-rgb), 0.025);

$steps-head-text-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.55);
$steps-head-text-after-font-size: 0.8rem;

$steps-head-icon-font-size: 0.875rem;
$steps-head-icon-width: 1.938rem;
$steps-head-icon-height: 1.938rem;
$steps-head-icon-font-weight: 500;

$steps-active-head-text-font-weight: 500;

// Stepper
$stepper-padding-x: 1rem;

$stepper-step-height: 4.5rem;

$stepper-step-head-padding-left: 1.5rem;
$stepper-step-head-padding-right: 1.5rem;
$stepper-step-head-height: 1px;
$stepper-step-head-bg: rgba(var(--#{$prefix}emphasis-color-rgb), 0.1);
$stepper-step-head-margin-right: 0.5rem;
$stepper-step-head-margin-left: 0.5rem;

$stepper-head-icon-margin-y: 1.5rem;
$stepper-head-icon-margin-right: 0.5rem;

$stepper-vertical-step-top: 3.25rem;
$stepper-vertical-step-height: calc(100% - 2.45rem);
$stepper-vertical-content-padding-left: 3.75rem;
$stepper-vertical-content-transition: height 0.3s ease-in-out, margin-top 0.3s ease-in-out,
  margin-bottom 0.3s ease-in-out, padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
$stepper-vertical-head-padding-bottom: 1.5rem;

$stepper-mobile-step-margin-y: 1rem;
$stepper-mobile-step-head-padding-x: 0.25rem;
$stepper-mobile-head-icon-height: 0.5rem;
$stepper-mobile-head-icon-width: 0.5rem;
$stepper-mobile-content-top: 2.56rem;
$stepper-mobile-active-head-icon-bg: var(--#{$prefix}primary);
$stepper-mobile-completed-head-icon-bg: var(--#{$prefix}success);

$stepper-head-icon-bg: var(--#{$prefix}surface-inverted-bg);
$stepper-head-icon-color: var(--#{$prefix}surface-inverted-color);

$stepper-completed-head-icon-bg: var(--#{$prefix}success-bg-subtle);
$stepper-completed-head-icon-color: var(--#{$prefix}success-text-emphasis);

$stepper-active-head-icon-bg: var(--#{$prefix}primary-bg-subtle);
$stepper-active-head-icon-color: var(--#{$prefix}primary-text-emphasis);

$stepper-invalid-head-icon-bg: var(--#{$prefix}danger-bg-subtle);
$stepper-invalid-head-icon-color: var(--#{$prefix}danger-text-emphasis);

$stepper-disabled-head-color: rgba(var(--#{$prefix}emphasis-color-rgb), 0.3);
$stepper-disabled-head-icon-bg: $stepper-head-icon-bg;
$stepper-disabled-head-icon-color: rgba(var(--#{$prefix}surface-inverted-color-rgb), 0.55);

$stepper-mobile-head-padding-y: 0.5rem;
$stepper-mobile-head-padding-x: 1rem;
$stepper-mobile-head-bg: var(--#{$prefix}stepper-mobile-bg);
$stepper-mobile-footer-height: 2.5rem;
$stepper-mobile-footer-bg: $stepper-mobile-head-bg;
$stepper-mobile-invalid-icon-bg: var(--#{$prefix}danger);
$stepper-back-btn-i-margin-right: 0.5rem;
$stepper-next-btn-i-margin-left: 0.5rem;

$stepper-mobile-progress-bar-height: 0.3rem;
$stepper-mobile-progress-height: 0.3rem;
$stepper-mobile-progress-background-color: var(--#{$prefix}secondary-bg);
$stepper-mobile-active-progress-bar-color: var(--#{$prefix}primary);