React Bootstrap Stepper
React Stepper - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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.
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
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
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;
React 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' /> |
: |
Boolean | fa |
Defines Font Awesome style. Recomend to use with icon props |
<MDBStep far /> |
form |
Boolean | false |
Adds custom styles, when you use MDBStepper as a form | <MDBStep form /> |
icon |
String | |
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 /> |