Stepper
Angular Bootstrap 5 Stepper / Wizard component
Responsive stepper built with Bootstrap 5, Angular and Material Design. 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 the stepper component using the code below.
-
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
Use [linear]="true"
input to enable linear stepper. Linear stepper requires the
users to complete previous steps before proceeding to following steps.
No editable stepper
You can use [editable]="false"
input on mdb-step
to prevent from
editing the completed step again.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
-
step3
Vertical stepper
Use [orientation]="'vertical'"
to change stepper orientation to vertical.
-
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
Use [mobile]="true"
input on stepper with horizontal orientation to change
component view to mobile.
-
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 mobile 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
mobileBarBreakpoint
input.
Optional step
You can mark a step as optional by adding
[optional]="true"
to it.
Custom header
If you want to create a more detailed header you can do it by placing HTML code inside
ng-template
with mdbStepHeader
directive.
-
Heading
Subheading
Total Sum: $100 -
Step2
-
step3
Custom icons
If you want to use an icon instead of a step number you can do it by placing icon HTML code
inside ng-template
with mdbStepIcon
directive.
-
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
Change the view from horizontal to vertical or mobile with smaller screens using code below.
-
step1Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
-
step2
-
step3
Stepper - API
Import
Inputs
MdbStepperComponent
Name | Type | Default | Description |
---|---|---|---|
linear
|
boolean | false |
Changes stepper mode to linear |
markAsCompleted
|
boolean | true |
Marks previous step as completed after switching to next step |
mobile
|
boolean | false |
Changes stepper view to mobile |
MdbStepComponent
Name | Type | Default | Description |
---|---|---|---|
editable
|
boolean | true |
Adds posibility to enable or disable step edition |
name
|
string | - |
Changes step header name |
optional
|
boolean | false |
Changes step to optional (works in linear mode) |
stepForm
|
FromGroup | - |
Form group that will be validated in linear mode |
Outputs
Name | Type | Description |
---|---|---|
stepChange
|
EventEmitter<MdbStepChangeEvent> | Event fired on active step change |
Methods
Name | Description | Example |
---|---|---|
next
|
Go to next step |
stepper.next()
|
newActiveStep
|
Go to step with specific index |
stepper.newActiveStep(2)
|
previous
|
Go to previous step |
stepper.previous()
|
Advanced types
MdbStepChangeEvent
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.