Stepper MDB Pro component

Stepper - Bootstrap 5 & Material Design 2.0 components

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.

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


Basic example

You can automatically initialize the stepper component using data-stepper="stepper"

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

          <ul class="stepper" data-stepper="stepper">
            <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, consectetur adipiscing elit, sed do eiusmod tempor
                  incididunt ut labore et dolore magna aliqua</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">
                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>
        

Change steps using external elements

To go to the next or previous step, you can use the nextStep and previousStep 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
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

          <div class="mb-3">
            <button id="prev-step" class="btn btn-primary">prev</button>
            <button id="step-1" class="btn btn-primary">step1</button>
            <button id="step-2" class="btn btn-primary">step2</button>
            <button id="step-3" class="btn btn-primary">step3</button>
            <button id="next-step" class="btn btn-primary">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>
        

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

          document.getElementById('next-step').addEventListener('click', () => {
            stepper.nextStep();
          });
    
          document.getElementById('prev-step').addEventListener('click', () => {
            stepper.previousStep();
          });
    
          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 proceeding to the next step you can set data-stepper-linear="true"

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

          <ul class="stepper" data-stepper="stepper" data-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">
                    <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">
                    <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">
                    <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">Submit</button>
                </div>
              </li>
            </form>
          </ul>
        

No editable stepper

You can set data-stepper-no-editable="true" to prevent you from editing the completed step again

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

          <ul class="stepper" data-stepper="stepper" data-stepper-no-editable="false">
            <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">
                    <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">
                    <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">
                    <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>
        

Vertical stepper

Set data-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.

          <ul class="stepper" data-stepper="stepper" data-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>
        

Mobile stepper

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

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

          <ul class="stepper" data-stepper="stepper" data-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>
        

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

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

          <ul class="stepper" data-stepper="stepper" data-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>
        

Optional step

You can mark a step as optional by adding data-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
    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.

          <ul class="stepper" data-stepper="stepper">
            <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-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>
        

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-text"></span>

  • step1
    invalid
  • step2
    invalid
  • step3
    invalid

          <ul class="stepper" data-stepper="stepper">
            <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">
                    <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">
                    <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">
                    <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>
        

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-stepper-vertical-breakpoint and data-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
    invalid
  • step3
    invalid

          <ul
            class="stepper"
            data-stepper="stepper"
            data-stepper-vertical-breakpoint="768"
            data-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">
                    <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">
                    <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-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">
                    <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>
        

Events

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

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

          <ul class="stepper" data-stepper="stepper" data-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">
                    <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">
                    <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">
                    <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>
        

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

Add custom validation

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

  • 1 step1
    Password should have 5 or more characters
  • 2 step2
    invalid
  • 3 step3
    invalid

          <ul class="stepper" data-stepper="stepper" data-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">
                    <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">
                    <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">
                    <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>
        

          document.querySelector('.stepper .stepper-step').addEventListener('onChangeStep.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


Usage

Via data attributes


        <ul class="stepper" data-stepper="stepper"">
          <!-- ... -->
        </ul>
      

Via JavaScript


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

Via jQuery

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


        $('#stepper').stepper();
      

Options

Name Data attribute Type Default Description
stepperType data-stepper-type String 'horizontal' Set stepper view
stepperLinear data-stepper-linear Boolean false Set to true to use the linear stepper
stepperNoEditable data-stepper-no-editable Boolean false Set to true to block editing of the completed step
stepperActive data-stepper-active String '' Set a custom active class
stepperCompleted data-stepper-completed String '' Set a custom completed class
stepperInvalid data-stepper-invalid String '' Set a custom invalid class
stepperDisabled data-stepper-disabled String '' Set a custom disabled class
stepperVerticalBreakpoint data-stepper-vertical-breakpoint Number 0 Set the resolution below which the stepper will switch to vertical
stepperMobileBreakpoint data-stepper-mobile-breakpoint Number 0 Set the resolution below which the stepper will switch to mobile
stepperMobileBarBreakpoint data-stepper-mobile-bar-breakpoint Number 4 Set the step limit after which the progress bar will appear in the mobile view instead of the dots

Methods

Name Description Example
changeStep Switch to the step given as the parameter stepper.changeStep()
nextStep Switch to the next step stepper.nextStep()
previousStep Switch to the previous step stepper.previousStep()

        const myStepperEl = document.getElementById('stepper');
        const stepper = new mdb.Stepper(myStepperEl);
        stepper.nextStep();
      

Events

Name Description
onChangeStep.mdb.stepper Event emitted before the step change
onValid.mdb.stepper Event emitted after successful step validation
onInvalid.mdb.stepper Event emitted after unsuccessful step validation

        const stepOne = document.querySelectorAll('.stepper .stepper-step')[0];
        stepOne.addEventListener('onChangeStep.mdb.stepper', (e) => {
          // do something...
        });
      

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:


        import { Stepper } from 'mdb-ui-kit';