web
mobile
Edit these docs Rate these docs

React Bootstrap Stepper MDB Pro component

React Stepper - Bootstrap 4 & Material Design

React Bootstrap stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons.

This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Stepper can be aligned vertically as well as horizontally.

Examples of React Bootstrap steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

See the following Bootstrap React stepper examples:


Registration form with steps

The step indicator is generated by the component, basing on the name and icon props passed in with individual steps.

Registration form

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!


        import React from "react";
        import { MDBContainer, MDBRow, MDBCol, MDBStepper, MDBStep, MDBBtn, MDBInput } from "mdbreact";

        class StepperExample extends React.Component {

        state = {
          formActivePanel1: 1,
          formActivePanel1Changed: false,
        }

        swapFormActive = (a) => (param) => (e) => {
          this.setState({
            ['formActivePanel' + a]: param,
            ['formActivePanel' + a + 'Changed']: true
          });
        }

        handleNextPrevClick = (a) => (param) => (e) => {
          this.setState({
            ['formActivePanel' + a]: param,
            ['formActivePanel' + a + 'Changed']: true
          });
        }

        handleSubmission = () => {
          alert('Form submitted!');
        }

        calculateAutofocus = (a) => {
          if (this.state['formActivePanel' + a + 'Changed']) {
            return true
          }
        }

        render() {
          return (
            <MDBContainer>
              <h2 className="text-center font-weight-bold pt-4 pb-5 mb-2"><strong>Registration form</strong></h2>
              <MDBStepper icon>
                <MDBStep far icon="folder-open" stepName="Basic Information" onClick={this.swapFormActive(1)(1)}></MDBStep>
                <MDBStep icon="pencil-alt" stepName="Personal Data" onClick={this.swapFormActive(1)(2)}></MDBStep>
                <MDBStep icon="photo" stepName="Terms and Conditions" onClick={this.swapFormActive(1)(3)}></MDBStep>
                <MDBStep icon="check" stepName="Finish" onClick={this.swapFormActive(1)(4)}></MDBStep>
              </MDBStepper>

              <form role="form" action="" method="post">
                <MDBRow>
                  {this.state.formActivePanel1 == 1 &&
                  (<MDBCol md="12">
                    <h3 className="font-weight-bold pl-0 my-4">
                      <strong>Basic Information</strong></h3>
                    <MDBInput label="Email" className="mt-4" autoFocus={this.calculateAutofocus(1)} />
                    <MDBInput label="Username" className="mt-4" />
                    <MDBInput label="Password" className="mt-4" />
                    <MDBInput label="Repeat Password" className="mt-4" />
                    <MDBBtn color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(1)(2)}>next</MDBBtn>
                  </MDBCol>)}

                  {this.state.formActivePanel1 == 2 &&
                  (<MDBCol md="12">
                    <h3 className="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
                    <MDBInput label="First Name" className="mt-3" autoFocus={this.calculateAutofocus(1)} />
                    <MDBInput label="Second Name" className="mt-3" />
                    <MDBInput label="Surname" className="mt-3" />
                    <MDBInput label="Address" type="textarea" rows="2" />
                    <MDBBtn color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(1)(1)}>previous</MDBBtn>
                    <MDBBtn color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(1)(3)}>next</MDBBtn>
                  </MDBCol>)}

                  {this.state.formActivePanel1 == 3 &&
                  (<MDBCol md="12">
                    <h3 className="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
                    <MDBInput label="I agreee to the terms and conditions" type="checkbox" id="checkbox" autoFocus={this.calculateAutofocus(1)} />
                    <MDBInput label="I want to receive newsletter" type="checkbox" id="checkbox2" />
                    <MDBBtn color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(1)(2)}>previous</MDBBtn>
                    <MDBBtn color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(1)(4)}>next</MDBBtn>
                  </MDBCol>)}

                  {this.state.formActivePanel1 == 4 &&
                  (<MDBCol md="12">
                    <h3 className="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
                    <h2 className="text-center font-weight-bold my-4">Registration completed!</h2>
                    <MDBBtn color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(1)(3)}>previous</MDBBtn>
                    <MDBBtn color="success" rounded className="float-right" onClick={this.handleSubmission}>submit</MDBBtn>
                  </MDBCol>)}
                </MDBRow>
              </form>
            </MDBContainer>
            );
          };
        }

        export default StepperExample;
      

Vertical registration form steps

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!



        import React from "react";
        import { MDBContainer, MDBRow, MDBCol, MDBStepper, MDBStep, MDBBtn, MDBCard, MDBCardBody, MDBInput } from "mdbreact";


        class StepperExample extends React.Component {

        state = {
          formActivePanel3: 1,
          formActivePanel1Changed: false,
        }

        swapFormActive = (a) => (param) => (e) => {
          this.setState({
            ['formActivePanel' + a]: param,
            ['formActivePanel' + a + 'Changed']: true
          });
        }

        handleNextPrevClick = (a) => (param) => (e) => {
          this.setState({
            ['formActivePanel' + a]: param,
            ['formActivePanel' + a + 'Changed']: true
          });
        }

        handleSubmission = () => {
          alert('Form submitted!');
        }

        calculateAutofocus = (a) => {
          if (this.state['formActivePanel' + a + 'Changed']) {
          return true
          }
        }

        render() {
          return (
            <MDBContainer>
              <MDBCard>
                <MDBCardBody>
                  <MDBRow className="pt-5 justify-content-center">
                    <MDBCol md="2" className="pl-5 pl-md-0 pb-5">
                      <MDBStepper icon vertical>
                        <MDBStep far icon="folder-open" stepName="Basic Information" onClick={this.swapFormActive(3)(1)} vertical />
                        <MDBStep icon="pencil-alt" stepName="Personal Data" onClick={this.swapFormActive(3)(2)} vertical />
                        <MDBStep far icon="image" stepName="Terms and Conditions" onClick={this.swapFormActive(3)(3)} vertical />
                        <MDBStep icon="check" stepName="Finish" onClick={this.swapFormActive(3)(4)} vertical />
                      </MDBStepper>
                    </MDBCol>

                    <MDBCol md="7">
                      {this.state.formActivePanel3 === 1 && (
                      <MDBCol md="12">
                        <h3 className="font-weight-bold pl-0 my-4">
                          <strong>Basic Information</strong>
                        </h3>
                        <MDBInput label="Email" className="mt-4" autoFocus={this.calculateAutofocus(3)} />
                        <MDBInput label="Username" className="mt-4" />
                        <MDBInput label="Password" className="mt-4" />
                        <MDBInput label="Repeat Password" className="mt-4" />
                        <MDBBtn color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(3)(2)}>
                          next
                        </MDBBtn>
                      </MDBCol>
                      )}
                      {this.state.formActivePanel3 === 2 && (
                      <MDBCol md="12">
                        <h3 className="font-weight-bold pl-0 my-4">
                          <strong>Personal Data</strong>
                        </h3>
                        <MDBInput label="First Name" className="mt-3" autoFocus={this.calculateAutofocus(3)} />
                        <MDBInput label="Second Name" className="mt-3" />
                        <MDBInput label="Surname" className="mt-3" />
                        <MDBInput label="Address" type="textarea" rows="2" />
                        <MDBBtn color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(3)(1)}>
                          previous
                        </MDBBtn>
                        <MDBBtn color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(3)(3)}>
                          next
                        </MDBBtn>
                      </MDBCol>
                      )}
                      {this.state.formActivePanel3 === 3 && (
                      <MDBCol md="12">
                        <h3 className="font-weight-bold pl-0 my-4">
                          <strong>Terms and conditions</strong>
                        </h3>
                        <MDBInput label="I agreee to the terms and conditions" type="checkbox" id="checkbox3" autoFocus={this.calculateAutofocus(3)} />
                        <MDBInput label="I want to receive newsletter" type="checkbox" id="checkbox4" />
                        <MDBBtn color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(3)(2)}>
                          previous
                        </MDBBtn>
                        <MDBBtn color="mdb-color" rounded className="float-right" onClick={this.handleNextPrevClick(3)(4)}>
                          next
                        </MDBBtn>
                      </MDBCol>
                      )}
                      {this.state.formActivePanel3 === 4 && (
                      <MDBCol md="12">
                        <h3 className="font-weight-bold pl-0 my-4">
                          <strong>Finish</strong>
                        </h3>
                        <h2 className="text-center font-weight-bold my-4">
                          Registration completed!
                        </h2>
                        <MDBBtn color="mdb-color" rounded className="float-left" onClick={this.handleNextPrevClick(3)(3)}>
                          previous
                        </MDBBtn>
                        <MDBBtn color="success" rounded className="float-right" onClick={this.handleSubmission}>
                          submit
                        </MDBBtn>
                      </MDBCol>
                      )}
                    </MDBCol>
                  </MDBRow>
                </MDBCardBody>
              </MDBCard>
            </MDBContainer>
            );
          };
        }

        export default StepperExample;
      

Steps within form

Steps form example

1

Step 1

2

Step 2

3

Step 3

Step 1

Step 2

Step 3


        import React from "react";
        import { MDBContainer, MDBRow, MDBCol, MDBStepper, MDBStep, MDBBtn, MDBCard, MDBCardBody, MDBInput } from "mdbreact";


        class StepperExample extends React.Component {

        state = {
          formActivePanel1: 1,
          formActivePanel1Changed: false,
        }

        swapFormActive = (a) => (param) => (e) => {
          this.setState({
            ['formActivePanel' + a]: param,
            ['formActivePanel' + a + 'Changed']: true
          });
        }

        handleNextPrevClick = (a) => (param) => (e) => {
          this.setState({
            ['formActivePanel' + a]: param,
            ['formActivePanel' + a + 'Changed']: true
          });
        }

        handleSubmission = () => {
          alert('Form submitted!');
        }

        calculateAutofocus = (a) => {
          if (this.state['formActivePanel' + a + 'Changed']) {
            return true
          }
        }

        render() {
          return (
            <MDBContainer>
              <MDBRow>
                <MDBCol xl="6" lg="7" md="10">
                  <MDBCard>
                    <MDBCardBody>
                      <h2 className="text-center font-weight-bold pt-4 pb-5">
                        <strong>Steps form example</strong>
                      </h2>
                      <MDBStepper form>
                        <MDBStep form>
                          <a href="#formstep1" onClick={this.swapFormActive(1)(1)}>
                            <MDBBtn color={ this.state.formActivePanel1===1 ? "indigo" : "default" } circle>
                              1
                            </MDBBtn>
                          </a>
                          <p>MDBStep 1</p>
                        </MDBStep>
                        <MDBStep form>
                          <a href="#formstep2" onClick={this.swapFormActive(1)(2)}>
                            <MDBBtn color={ this.state.formActivePanel1===2 ? "indigo" : "default" } circle>
                              2
                            </MDBBtn>
                          </a>
                          <p>MDBStep 2</p>
                        </MDBStep>
                        <MDBStep form>
                          <a href="#formstep3" onClick={this.swapFormActive(1)(3)}>
                            <MDBBtn color={ this.state.formActivePanel1===3 ? "indigo" : "default" } circle>
                              3
                            </MDBBtn>
                          </a>
                          <p>MDBStep 3</p>
                        </MDBStep>
                      </MDBStepper>

                      <form action="" method="post">
                        <MDBRow>
                          {this.state.formActivePanel1 === 1 && (
                          <MDBCol md="12">
                            <h3 className="font-weight-bold pl-0 my-4">
                              <strong>MDBStep 1</strong>
                            </h3>
                            <MDBInput label="First Name" className="mt-3" autoFocus={this.calculateAutofocus(1)} />
                            <MDBInput label="Last Name" className="mt-3" />
                            <MDBInput label="Address" type="textarea" rows="2" />
                            <MDBBtn color="indigo" rounded className="float-right" onClick={this.handleNextPrevClick(1)(2)}>
                              next
                            </MDBBtn>
                          </MDBCol>
                          )}
                          {this.state.formActivePanel1 === 2 && (
                          <MDBCol md="12">
                            <h3 className="font-weight-bold pl-0 my-4">
                              <strong>MDBStep 2</strong>
                            </h3>
                            <MDBInput label="Company Name" className="mt-4" autoFocus={this.calculateAutofocus(1)} />
                            <MDBInput label="Company Address" className="mt-4" />
                            <MDBBtn color="indigo" rounded className="float-left" onClick={this.handleNextPrevClick(1)(1)}>
                              previous
                            </MDBBtn>
                            <MDBBtn color="indigo" rounded className="float-right" onClick={this.handleNextPrevClick(1)(3)}>
                              next
                            </MDBBtn>
                          </MDBCol>
                          )}
                          {this.state.formActivePanel1 === 3 && (
                          <MDBCol md="12">
                            <h3 className="font-weight-bold pl-0 my-4">
                              <strong>MDBStep 3</strong>
                            </h3>
                            <MDBBtn color="indigo" rounded className="float-left" onClick={this.handleNextPrevClick(1)(2)}
                              autoFocus={this.calculateAutofocus(1)}>
                              previous
                            </MDBBtn>
                            <MDBBtn color="default" rounded className="float-right" onClick={this.handleSubmission}>
                              submit
                            </MDBBtn>
                          </MDBCol>
                          )}
                        </MDBRow>
                      </form>
                    </MDBCardBody>
                  </MDBCard>
                </MDBCol>
              </MDBRow>
            </MDBContainer>
            );
          };
        }

        export default StepperExample;
      

Horizontal steppers

This form of the stepper is a simple ul-based wrapper, open for custom interactions to be designed. Below is a suggested take on the implementation.


        import React from "react";
        import { MDBContainer, MDBStepper, MDBStep, MDBIcon } from "mdbreact";


        const StepperExample = () => {
          return (
            <MDBContainer>
              <MDBStepper>
                <MDBStep className="completed">
                  <a href="#!">
                    <span className="circle">1</span>
                    <span className="label">First step</span>
                  </a>
                </MDBStep>
                <MDBStep className="active">
                  <a href="#!">
                    <span className="circle">2</span>
                    <span className="label">Second step</span>
                  </a>
                </MDBStep>
                <MDBStep className="warning">
                  <a href="#!">
                    <span className="circle">
                      <MDBIcon icon="exclamation-triangle" />
                    </span>
                    <span className="label">Third step</span>
                  </a>
                </MDBStep>
              </MDBStepper>
            </MDBContainer>
          );
        }

        export default StepperExample;

      

Vertical steppers

  • 1 First step
  • 2 Second step

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.

    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.

  • Third step
  • 4 Fourth step

        import React from "react";
        import { MDBContainer, MDBStepper, MDBStep, MDBIcon, MDBRow, MDBCol, MDBBtn } from "mdbreact";


        const StepperExample = () => {

          return (
            <MDBContainer>
              <MDBStepper vertical>
                <MDBStep className="completed">
                  <a href="#!">
                    <span className="circle">1</span>
                    <span className="label">First step</span>
                  </a>
                </MDBStep>
                <MDBStep className="active">
                  <a href="#!">
                    <span className="circle">2</span>
                    <span className="label">Second step</span>
                  </a>
                  <div className="step-content grey lighten-4">
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse
                      cupiditate voluptate facere iusto quaerat vitae excepturi,
                      accusantium ut aliquam repellat atque nesciunt nostrum
                      similique. Inventore nostrum ut, nobis porro sapiente.
                    </p>
                    <p>
                      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                      Dolore error excepturi veniam nemo repellendus, distinctio
                      soluta vitae at sit saepe. Optio eaque quia excepturi adipisci
                      pariatur totam, atque odit fugiat.
                    </p>
                    <p>
                      Deserunt voluptatem illum quae nisi soluta eum perferendis
                      nesciunt asperiores tempore saepe reiciendis, vero quod a
                      dolor corporis natus qui magni quas fuga rem excepturi
                      laboriosam. Quisquam expedita ab fugiat.
                    </p>
                  </div>
                </MDBStep>
                <MDBStep className="warning">
                  <a href="#!">
                    <span className="circle">
                      <MDBIcon icon="exclamation-triangle" />
                    </span>
                    <span className="label">Third step</span>
                  </a>
                </MDBStep>
                <MDBStep>
                  <a href="#!">
                    <span className="circle">4</span>
                    <span className="label">Fourth step</span>
                  </a>
                </MDBStep>
                <MDBRow className="mt-1">
                  <MDBCol md="12" className="text-right">
                    <MDBBtn flat>Cancel</MDBBtn>
                    <MDBBtn color="primary">Next </MDBBtn>
                  </MDBCol>
                </MDBRow>
              </MDBStepper>
            </MDBContainer>
          );
        }

        export default StepperExample;


      
Edit these docs Rate these docs

Stepper - API

In this section you will find advanced information about the Stepper component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


         import { MDBStepper, MDBStep } from "mdbreact";
        

API Reference: MDBStepper Properties

The table below shows the configuration options of the MDBStepper component.

Name Type Default Description Example
className String Adds custom class to the Stepper component <MDBStepper className="myClass" />
form Boolean false Adds proper styles when MDBStepper is used as a form. <MDBStepper form />
icon Boolean Adds proper styles when MDBStepper uses buttons with icons <MDBStepper icon />
vertical Boolean false Controls whether the generated stepper should be oriented vertically <MDBStepper vertical />

API Reference: MDBStep Properties

The table below shows the configuration options of the MDBStep component.

Name Type Default Description Example
tag String Defines custom HTML tag for MDBStep Component <MDBStep tag='div' />
form Boolean false Adds custom styles, when you use MDBStepper as a form <MDBStep form />
icon Boolean Defines icon used within MDBStep <MDBStep far icon="folder-open" />
stepName String Specifies the text content within MDBStep's tooltip which is visible on hover event <MDBStep stepName="Basic Information" />
vertical Boolean false Should be used whenever MDBStepper is oriented vertically <MDBStep vertical />