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

Basic example

You can automatically initialize the stepper component using data-mdb-stepper-init attribute.

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.

Linear stepper

If you want to use basic validation before advancing to the next step you can set data-mdb-stepper-linear="true"

No editable stepper

You can set data-mdb-stepper-no-editable="true" to prevent editing a completed step.

Vertical stepper

Set data-mdb-stepper-type="vertical" to use the vertical view.

Mobile stepper

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

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.

Stepper with gesture support

Adding Touch Swipe utils to the stepper enables changing the stepper step using gestures.

Optional step

You can mark a step as optional by adding data-mdb-stepper-optional="true" to it.

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>

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

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.

Add custom validation

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

Related resources

If you want to support our friends from TW Elements you can also check out the Tailwind stepper documentation.