Stepper
Vue Stepper / Wizard component
Responsive stepper built with Bootstrap 5 and Vue 3. 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
Basic example
Initialize stepper with MDBStepper
component
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
-
step3
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
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
-
step3
Linear stepper
If you want to use basic validation before proceeding to the next step
you can set
linear
property
No editable stepper
You can set noEditable
property to
prevent you from editing the completed step again
-
step1
-
step2
-
step3
Vertical stepper
Set vertical
property 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.
Mobile stepper
Set mobile
property to use mobile view
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
-
step3
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
mobile mobileProgress
properties
Optional step
You can mark a step as optional by adding
optional
to it
-
step1Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
-
step2
-
step3
Custom icons
if you want to use an icon instead of a step number you can do it by
placing it inside
#icon
slot
-
step1
-
step2
-
step3
Form wizard
An example of so-called "Form wizard" with multiple inputs on each step.
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
verticalBreakpoint
and
mobileBeakpoint
properties 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
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.
-
step1
-
step2
-
step3
If you want to support our friends from Tailwind Elements you can also check out the Tailwind stepper documentation.
Stepper - API
Import
Properties
MDBStepper
Name | Type | Default | Description |
---|---|---|---|
tag
|
String | 'ul' |
Defines tag of the MDBStepper element |
activeStepIndex
|
Number | 1 |
Set initial active step |
linear
|
Boolean | false |
Set true for linear stepper |
vertical
|
Boolean | false |
Set true for vertical stepper |
mobile
|
Boolean | false |
Set true for mobile stepper |
mobileProgress
|
Boolean | false |
Set true to indicate progress of the stepper |
noEditable
|
Boolean | false |
Set true to block editing of the completed step |
verticalBreakpoint
|
Number |
|
Set the resolution below which the stepper will switch to vertical mode |
mobileBreakpoint
|
Number |
|
Set the resolution below which the stepper will switch to mobile mode |
MDBStepperStep
Name | Type | Default | Description |
---|---|---|---|
tag
|
String | 'li' |
Defines tag of the MDBStepperStep element |
optional
|
Boolean | false |
Sets stepper step element optional |
MDBStepperHead
Name | Type | Default | Description |
---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBStepperHead element |
MDBStepperContent
Name | Type | Default | Description |
---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBStepperContent element |
MDBStepperForm
Name | Type | Default | Description |
---|---|---|---|
tag
|
String | 'div' |
Defines tag of the MDBStepperForm element |
Methods
Name | Description | Example |
---|---|---|
changeStep
|
Switch to the step given as the parameter |
$refs.stepper.changeStep(index)
|
nextStep
|
Switch to the next step |
$refs.stepper.nextStep()
|
prevStep
|
Switch to the previous step |
$refs.stepper.prevStep()
|