Stepper
React Bootstrap 5 Stepper
React Bootstrap 5 Stepper is a component that shows content in the form of a process with user-defined milestones. Buttons divide and connect the stages that follow.
This is an excellent option for a variety of registration forms in which you don't want to overwhelm the user with too many fields and queries.
The stepper can be positioned both vertically and horizontally.
Examples of React Bootstrap 5 steps use:
- Registration form
- Payment gateway
- Tutorial with steps
Importing the Contrast React Bootstrap 5 Stepper and Step Component
Import CDBStepper
into your project to use the React Bootstrap 5 Stepper component. After that, you import CDBStep
. The component CDBStep
is nested within the component CDBStepper
. They represent the many steps of the process.
import { CDBStepper, CDBStep } from "cdbreact";
Horizontal Stepper
import React, { useState } from "react";import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";
export const Stepper = () => { const [active, setActive] = useState(1);
const handleNextPrevClick = a => setActive(a); return ( <CDBStepper> <CDBStep id={1} icon="pencil-alt" name="Basic Information" handleClick={() => handleNextPrevClick(1)} active={active} component={<Step1 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={2} icon="info-circle" name="Personal Data" handleClick={() => handleNextPrevClick(2)} active={active} component={<Step2 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={3} icon="book-reader" name="Terms and Conditions" handleClick={() => handleNextPrevClick(3)} active={active} component={<Step3 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={4} icon="check" name="Finish" handleClick={() => handleNextPrevClick(4)} active={active} component={<Step4 handleNextPrevClick={handleNextPrevClick} />} /> </CDBStepper> );};
export default Stepper;
Vertical Stepper
Pro ComponentThe CDBStepper
accepts a direction
parameter that specifies the stepper's orientation.
Alongside our CDBStepper
, we also import CDBIcon for our icons, CDBInput for the input fields, and the CDBButton for our buttons.
Each CDBStep
component accepts a component props that defines the component to render when that step is active
import React, { useState } from "react";import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";
export const Stepper = () => { const [active, setActive] = useState(1);
const handleNextPrevClick = a => { setActive(a); }; return ( <CDBStepper direction="vertical" > <CDBStep id={1} icon="pencil-alt" name="Basic Information" handleClick={() => handleNextPrevClick(1)} active={active} component={<Step1 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={2} icon="info-circle" name="Personal Data" handleClick={() => handleNextPrevClick(2)} active={active} component={<Step2 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={3} icon="book-reader" name="Terms and Conditions" handleClick={() => handleNextPrevClick(3)} active={active} component={<Step3 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={4} icon="check" name="Finish" handleClick={() => handleNextPrevClick(4)} active={active} component={<Step4 handleNextPrevClick={handleNextPrevClick} />} /> </CDBStepper> );};
export default Stepper;
Stepper Without Icons and Headers
import React, { useState } from "react";import { CDBStepper, CDBStep, CDBContainer } from "cdbreact";
export const Stepper = () => {
const [active, setActive] = useState(1)
const handleNextPrevClick = (a) => { setActive(a) }; return ( <CDBStepper direction="horizontal" showTitle={false} showTooltip={false}> <CDBStep id={1} name="Basic Information" handleClick={() => handleNextPrevClick(1)} active={active} component={<Step1 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={2} name="Personal Data" handleClick={() => handleNextPrevClick(2)} active={active} component={<Step2 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={3} name="Terms and Conditions" handleClick={() => handleNextPrevClick(3)} active={active} component={<Step3 handleNextPrevClick={handleNextPrevClick} />} /> <CDBStep id={4} name="Finish" handleClick={() => handleNextPrevClick(4)} active={active} component={<Step4 handleNextPrevClick={handleNextPrevClick} />} /> </CDBStepper> )
};
API Reference: Contrast React Bootstrap 5 Step Props
The props you get to use with the Contrast React Bootstrap 5 Step component will be elaborated on in this section. You'll understand what these props are for, how to utilize them in your code, and what their default values are.
Other options for the 'CDBStep' are listed in the table below.
Name | Type | Default | Description | Example |
---|---|---|---|---|
className | String | Adds custom classes | <CDBStep className="myClass" ... /> | |
id | Number | Provides an ID for the step | <CDBStep id={1} ... /> | |
far, fab, fas | Boolean | Defines Font Awesome style. Recommend to use with icon props | <CDBStep fas .../> | |
name | String | Specifies the text content within CDBStep's tooltip which is visible on hover event | <CDBStep name="label" ... /> | |
icon | String | Defines icon used within CDBStep | <CDBStep icon="folder-open" ... /> | |
component | Node | Defines the component that shows when the step is active | <CDBStep component={} ... /> |
API Reference: Contrast React Bootstrap 5 Stepper Props
The props you get to use with the Contrast React Bootstrap 5 Step component will be elaborated on in this section. You'll understand what these props are for, how to utilize them in your code, and what their default values are.
Other options for the CDBStepper
are listed in the table below.
Name | Type | Default | Description | Example |
---|---|---|---|---|
direction | String | horizontal | Required! Controls the orientation of generated stepper. Can be either vertical or horizontal | <CDBStepper direction="vertical" ... /> |
stepSize | number | 45 | defines size of steps | <CDBStepper stepSize={50} ... /> |
showTooltip | boolean | true | defines whether tooltip popper is shown | <CDBStepper showTooltip ... /> |
showTitle | boolean | true | defines whether title is shown | <CDBStepper showTitle ... /> |
Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast