Stepper

React 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 MDBStepper

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Change steps using external elements

To go to the next or previous step, you can use the useState hook like in the example below.

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Linear stepper

If you want to use basic validation before proceeding to the next step you can set linear property

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

No editable stepper

You can set noEditable property to prevent you from editing the completed step again

  • 1 step1
    invalid
  • 2 step2
    invalid
  • 3 step3
    invalid

Vertical stepper

Set vertical to use the vertical view

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 3 step3
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

Mobile stepper

Set mobile to use mobile view

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

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 mobileProgress property

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur
  • 3 step3
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur

Optional step

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

  • 1 step1
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 2 step2
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.
  • 3 step3
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies.

Custom icons

if you want to use an icon instead of a step number you can do it by setting MDBStepperHead icon property

  • step1
    invalid
  • step2
    invalid
  • step3
    invalid

Form wizard

An example of so-called "Form wizard" with multiple inputs on each step.

  • 1 step1
    invalid
    invalid
  • 2 step2
    invalid
    invalid
    invalid
    invalid
  • 3 step3

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 mobileBreakpoint property 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
    invalid
  • step2
    invalid
  • step3
    invalid

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

Stepper - API


Import


        import { 
          MDBStepper,
          MDBStepperStep,
          MDBStepperHead,
          MDBStepperContent,
          MDBStepperForm,
        } from 'mdb-react-ui-kit';
      

Properties

MDBStepper

Name Type Default Description Example
className String '' Add custom classes to MDBStepper element <MDBStepper className="class" />
linear Boolean false Set to true to use the linear stepper <MDBStepper linear />
noEditable Boolean false Set to true to block editing of the completed step <MDBStepper noEditable />
mobile false - Set to true to use the mobile stepper <MDBStepper mobile />
mobileProgress Boolean false Set to true to use the mobile progress stepper <MDBStepper mobile mobileProgress />
mobileBreakpoint Number 0 Set the resolution below which the stepper will switch to mobile <MDBStepper mobileBreakpoint={500} />
outerState Number - Stepper state <MDBStepper outerState={state} />
setOuterState Function - Set the stepper state <MDBStepper setOuterState={setState} />
prevState Number - Stepper previous state <MDBStepper prevState={state} />
setPrevState Function - Set the stepper previous state <MDBStepper setPrevState={setState} />
vertical false - Set to true to use the vertical stepper <MDBStepper vertical />
verticalBreakpoint Number 0 Set the resolution below which the stepper will switch to vertical <MDBStepper verticalBreakpoint={700} />
tag String 'ul' Defines tag of the MDBStepper element <MDBStepper tag="section" />

MDBStepperStep

Name Type Default Description Example
className String '' Add custom classes to MDBStepperStep element <MDBStepperStep className="class" />
itemId Number - Sets element id number <MDBStepperStep itemId={1} />
tag String 'li' Defines tag of the MDBStepperStep element <MDBStepperStep tag="section" />

MDBStepperHead

Name Type Default Description Example
className String '' Add custom classes to MDBStepperHead element <MDBStepperHead className="class" />
icon String|Element - Defines stepper head icon <MDBStepperHead icon="1" />
text String - Set the text displayed in the stepper head <MDBStepperHead text="example text" />
tag String 'div' Defines tag of the MDBStepperHead element <MDBStepperHead tag="section" />

MDBStepperContent

Name Type Default Description Example
className String '' Add custom classes to MDBStepperContent element <MDBStepperContent className="class" />
tag String 'ul' Defines tag of the MDBStepperContent element <MDBStepperContent tag="section" />

MDBStepperForm

Name Type Default Description Example
className String '' Add custom classes to MDBStepperForm element <MDBStepperForm className="class" />