Search...

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

Basic Information
Personal Data
Terms and Conditions
Finish
import React, { useState } from "react";
import styled from '@emotion/styled'
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";
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;
const Step4 = ({ handleNextPrevClick }) => {
return (
<StepContainer md="12">
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 4
</div>
<FlexColumnContainer width="100%">
<div style={{ fontSize: '25px', textAlign: 'center' }}>
Congratulations! You have completed this process.
<span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
🎉
</span>
</div>
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
flat
outline
circle={false}
color="secondary"
onClick={() => handleNextPrevClick(3)}
>
Previous
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step3 = ({ handleNextPrevClick }) => {
return (
<StepContainer>
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 3
</div>
<FlexColumnContainer width="100%">
<div
style={{
fontSize: '10px',
fontWeight: '200',
maxHeight: '300px',
overflowY: 'auto',
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis
assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
</div>
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
className="float-start"
circle={false}
color="secondary"
flat
outline
onClick={() => handleNextPrevClick(2)}
>
Previous
</CDBBtn>
<CDBBtn
className="float-end"
flat
color="secondary"
circle={false}
onClick={() => handleNextPrevClick(4)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step2 = ({ handleNextPrevClick }) => {
return (
<StepContainer md="12">
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 2
</div>
<FlexColumnContainer width="100%">
<CDBInput color="secondary" label="FirstName" />
<CDBInput color="secondary" label="LastName" />
<CDBInput color="secondary" label="Surname" />
<CDBInput color="secondary" label="Address" />
<CDBInput color="secondary" label="Country" />
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
color="secondary"
flat
className="float-start"
circle={false}
outline
onClick={() => handleNextPrevClick(1)}
>
Previous
</CDBBtn>
<CDBBtn
color="secondary"
circle={false}
flat
className="float-end"
onClick={() => handleNextPrevClick(3)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step1 = ({ handleNextPrevClick }) => {
return (
<StepContainer>
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 1
</div>
<FlexColumnContainer width="100%">
<CDBInput color="secondary" label="Username" />
<CDBInput color="secondary" label="Email" />
<CDBInput color="secondary" label="Password" />
<CDBInput color="secondary" label="Confirm Password" />
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
color="secondary"
flat
circle={false}
className="float-end"
onClick={() => handleNextPrevClick(2)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const FlexColumnContainer = styled('div')`
padding: 10px;
display: flex;
flex-direction: column;
width: ${props => props.width};
justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
box-sizing: border-box;
`;
const StepContainer = styled('div')`
width: 100%;
height: 100%;
`;

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

Basic Information
Personal Data
Terms and Conditions
Finish
import React, { useState } from "react";
import styled from '@emotion/styled'
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";
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;
const Step4 = ({ handleNextPrevClick }) => {
return (
<StepContainer md="12">
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 4
</div>
<FlexColumnContainer width="100%">
<div style={{ fontSize: '25px', textAlign: 'center' }}>
Congratulations! You have completed this process.
<span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
🎉
</span>
</div>
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
flat
outline
circle={false}
color="secondary"
onClick={() => handleNextPrevClick(3)}
>
Previous
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step3 = ({ handleNextPrevClick }) => {
return (
<StepContainer>
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 3
</div>
<FlexColumnContainer width="100%">
<div
style={{
fontSize: '10px',
fontWeight: '200',
maxHeight: '300px',
overflowY: 'auto',
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis
assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
</div>
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
className="float-start"
circle={false}
color="secondary"
flat
outline
onClick={() => handleNextPrevClick(2)}
>
Previous
</CDBBtn>
<CDBBtn
className="float-end"
flat
color="secondary"
circle={false}
onClick={() => handleNextPrevClick(4)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step2 = ({ handleNextPrevClick }) => {
return (
<StepContainer md="12">
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 2
</div>
<FlexColumnContainer width="100%">
<CDBInput color="secondary" label="FirstName" />
<CDBInput color="secondary" label="LastName" />
<CDBInput color="secondary" label="Surname" />
<CDBInput color="secondary" label="Address" />
<CDBInput color="secondary" label="Country" />
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
color="secondary"
flat
className="float-start"
circle={false}
outline
onClick={() => handleNextPrevClick(1)}
>
Previous
</CDBBtn>
<CDBBtn
color="secondary"
circle={false}
flat
className="float-end"
onClick={() => handleNextPrevClick(3)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step1 = ({ handleNextPrevClick }) => {
return (
<StepContainer>
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 1
</div>
<FlexColumnContainer width="100%">
<CDBInput color="secondary" label="Username" />
<CDBInput color="secondary" label="Email" />
<CDBInput color="secondary" label="Password" />
<CDBInput color="secondary" label="Confirm Password" />
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
color="secondary"
flat
circle={false}
className="float-end"
onClick={() => handleNextPrevClick(2)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const FlexColumnContainer = styled('div')`
padding: 10px;
display: flex;
flex-direction: column;
width: ${props => props.width};
justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
box-sizing: border-box;
`;
const StepContainer = styled('div')`
width: 100%;
height: 100%;
`;

Stepper Without Icons and Headers

01
02
03
04
import React, { useState } from "react";
import styled from '@emotion/styled'
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>
)
};
const Step4 = ({ handleNextPrevClick }) => {
return (
<StepContainer md="12">
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 4
</div>
<FlexColumnContainer width="100%">
<div style={{ fontSize: '25px', textAlign: 'center' }}>
Congratulations! You have completed this process.
<span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
🎉
</span>
</div>
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
flat
outline
circle={false}
color="secondary"
onClick={() => handleNextPrevClick(3)}
>
Previous
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step3 = ({ handleNextPrevClick }) => {
return (
<StepContainer>
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 3
</div>
<FlexColumnContainer width="100%">
<div
style={{
fontSize: '10px',
fontWeight: '200',
maxHeight: '300px',
overflowY: 'auto',
}}
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus
molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis
assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
<p>
Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
quos facere sequi unde optio aliquam!
</p>
</div>
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
className="float-start"
circle={false}
color="secondary"
flat
outline
onClick={() => handleNextPrevClick(2)}
>
Previous
</CDBBtn>
<CDBBtn
className="float-end"
flat
color="secondary"
circle={false}
onClick={() => handleNextPrevClick(4)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step2 = ({ handleNextPrevClick }) => {
return (
<StepContainer md="12">
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 2
</div>
<FlexColumnContainer width="100%">
<CDBInput color="secondary" label="FirstName" />
<CDBInput color="secondary" label="LastName" />
<CDBInput color="secondary" label="Surname" />
<CDBInput color="secondary" label="Address" />
<CDBInput color="secondary" label="Country" />
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
color="secondary"
flat
className="float-start"
circle={false}
outline
onClick={() => handleNextPrevClick(1)}
>
Previous
</CDBBtn>
<CDBBtn
color="secondary"
circle={false}
flat
className="float-end"
onClick={() => handleNextPrevClick(3)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const Step1 = ({ handleNextPrevClick }) => {
return (
<StepContainer>
<div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
<div
style={{
margin: '0 auto',
maxWidth: '500px',
borderRadius: '10px',
background: '#f5f5f5',
boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
}}
>
<FlexColumnContainer>
<div
style={{
textAlign: 'center',
padding: '20px 0 10px 0',
color: '#939393',
fontSize: '30px',
fontWeight: 'bold',
}}
>
Step 1
</div>
<FlexColumnContainer width="100%">
<CDBInput color="secondary" label="Username" />
<CDBInput color="secondary" label="Email" />
<CDBInput color="secondary" label="Password" />
<CDBInput color="secondary" label="Confirm Password" />
<div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
<CDBBtn
color="secondary"
flat
circle={false}
className="float-end"
onClick={() => handleNextPrevClick(2)}
>
Next
</CDBBtn>
</div>
</FlexColumnContainer>
</FlexColumnContainer>
</div>
</div>
</StepContainer>
);
};
const FlexColumnContainer = styled('div')`
padding: 10px;
display: flex;
flex-direction: column;
width: ${props => props.width};
justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
box-sizing: border-box;
`;
const StepContainer = styled('div')`
width: 100%;
height: 100%;
`;

Step Color Styles

Pro Component

CDBSteps' background color may be changed to meet your expectations for design. There are a number of properties provided by CDBStepper that may be used to alter the color of the component, which includes mainColor, activeColor, completeColor, and incompleteColor. The color style defined in mainColor is overwritten when styling CDBStepper with activeColor, completeColor, and incompleteColor.

01
Basic Information
02
Personal Data
03