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
You can automatically initialize the stepper component using
data-mdb-stepper="stepper"
-
step1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
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
-
step1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur
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);
});
If you want to use basic validation before proceeding to the next step you can
set data-mdb-stepper-linear="true"
You can set data-mdb-stepper-no-editable="true" to prevent you from
editing the completed step again
-
step1
-
step2
-
step3
Set data-mdb-stepper-type="vertical" to use the vertical view
-
step1
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a
pellentesque dui, non felis. Maecenas malesuada elit lectus felis,
malesuada ultricies.
-
step2
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a
pellentesque dui, non felis. Maecenas malesuada elit lectus felis,
malesuada ultricies.
-
step3
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a
pellentesque dui, non felis. Maecenas malesuada elit lectus felis,
malesuada ultricies.
Set data-mdb-stepper-type="mobile" to use mobile view
-
step1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
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
-
step1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
-
step3
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur
You can mark a step as optional by adding
data-mdb-stepper-optional="true" to it
-
step1
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a
pellentesque dui, non felis. Maecenas malesuada elit lectus felis,
malesuada ultricies.
-
step2
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a
pellentesque dui, non felis. Maecenas malesuada elit lectus felis,
malesuada ultricies.
-
step3
Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a
pellentesque dui, non felis. Maecenas malesuada elit lectus felis,
malesuada ultricies.
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
-
step2
-
step3
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
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.
-
step1
-
step2
-
step3
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);
});
You can use the onChangeStep.mdb.stepper event to use your own
validation.
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(''); } });
const stepper = new mdb.Stepper(document.getElementById('stepper'));
Note: By default, MDB does not include jQuery and you have to add it to the project on your own.
$('#stepper').stepper();
| Name | Data attribute | Type | Default | Description |
|---|---|---|---|---|
stepperType
|
data-mdb-stepper-type |
String | 'horizontal' |
Set stepper view |
stepperLinear
|
data-mdb-stepper-linear |
Boolean | false |
Set to true to use the linear stepper |
stepperNoEditable
|
data-mdb-stepper-no-editable
|
Boolean | false |
Set to true to block editing of the completed step |
stepperActive
|
data-mdb-stepper-active |
String | '' |
Set a custom active class |
stepperCompleted
|
data-mdb-stepper-completed
|
String | '' |
Set a custom completed class |
stepperInvalid
|
data-mdb-stepper-invalid
|
String | '' |
Set a custom invalid class |
stepperDisabled
|
data-mdb-stepper-disabled
|
String | '' |
Set a custom disabled class |
stepperVerticalBreakpoint
|
data-mdb-stepper-vertical-breakpoint
|
Number | 0 |
Set the resolution below which the stepper will switch to vertical |
stepperMobileBreakpoint
|
data-mdb-stepper-mobile-breakpoint
|
Number | 0 |
Set the resolution below which the stepper will switch to mobile |
stepperMobileBarBreakpoint
|
data-mdb-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 |
| 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();
| 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...
});
MDB UI KIT also works with module bundlers. Use the following code to import this component:
import { Stepper } from 'mdb-ui-kit';