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.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis 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" 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"
<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.
-
step1
-
step2
-
step3
<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.
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step3Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
<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.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
-
step3Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
<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.
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step3Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
<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
-
step2
-
step3
<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.
<!-- 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
-
step2
-
step3
<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.
-
step1
-
step2
-
step3
<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.
<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.
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.
<ul class="stepper" data-mdb-stepper-init>
...
</ul>
Via JavaScript
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.
$(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()
|
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. |
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.
// .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
// 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);