🤩
Windframe Import update is finally here!

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

01
Basic Information
Basic Information
02
Personal Data
Personal Data
03
Terms and Conditions
Terms and Conditions
04
Finish
Finish
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 Component

The 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

01
Basic Information
Basic Information
02
Personal Data
Personal Data
03
Terms and Conditions
Terms and Conditions
04
Finish
Finish
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

01
02
03
04
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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBStep className="myClass" ... />
idNumberProvides an ID for the step<CDBStep id={1} ... />
far, fab, fasBooleanDefines Font Awesome style. Recommend to use with icon props<CDBStep fas .../>
nameStringSpecifies the text content within CDBStep's tooltip which is visible on hover event<CDBStep name="label" ... />
iconStringDefines icon used within CDBStep<CDBStep icon="folder-open" ... />
componentNode
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.

NameTypeDefaultDescriptionExample
directionStringhorizontalRequired! Controls the orientation of generated stepper. Can be either vertical or horizontal<CDBStepper direction="vertical" ... />
stepSizenumber45defines size of steps<CDBStepper stepSize={50} ... />
showTooltipbooleantruedefines whether tooltip popper is shown<CDBStepper showTooltip ... />
showTitlebooleantruedefines 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

ad-banner

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