Stepper
Some features in this component requires CDB React Pro package.Clickhereto try it out.
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.
js
import { CDBStepper, CDBStep } from "cdbreact";Horizontal Stepper
Basic Information
Personal Data
Terms and Conditions
Finish
js
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 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
Basic Information
Personal Data
Terms and Conditions
Finish
js
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
js
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 ComponentCDBSteps' 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
Terms and Conditions
04
Finish
js
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 ( <CDBContainer> <CDBStepper direction="horizontal" activeColor="#666666" completeColor="#505050" incompleteColor="#666666"> <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> </CDBContainer> );};
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%;`;Additionally, CDBStep provides options for modifying its background color. activeBgColor and activeTextColor may be used to modify the background color and color of a step when it is active.
You may change the background and text colors of a step when it comes before an active step by using the props completeBgColor and completeTextColor.
Steps that come after an active step can have their background and text colors changed using the properties incompleteBgColor and incompleteTextColor, respectively.
Any specified relating color style from CDBStepper is replaced when using any of these properties defined in CDBStep.
01
02
03
04
js
import React, { useState } from "react";import styled from '@emotion/styled'import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";
export const Stepper = () => { const [active, setActive] = useState(1);
const handleNextPrevClick = a => { setActive(a); }; return ( <CDBContainer> <CDBStepper direction="horizontal" showTitle={false} showTooltip={false} activeColor="#666666" completeColor="#505050" incompleteColor="#666666"> <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} />} activeBgColor='blue' activeTextColor='blue' incompleteBgColor='#A45A52' incompleteTextColor='lightgray' completeBgColor='green' completeTextColor='white' /> <CDBStep id={4} name="Finish" handleClick={() => handleNextPrevClick(4)} active={active} component={<Step4 handleNextPrevClick={handleNextPrevClick} />} /> </CDBStepper> </CDBContainer> );};
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%;`;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={} ... /> | |
| activeBgColor | String | Specifies the step's background color when the step is active | <CDBStep activeBgColor="yellow" ... /> | |
| activeTextColor | String | Specifies the step's text color when the step is active | <CDBStep activeTextColor="black" ... /> | |
| completeBgColor | String | Specifies the step's background color if the step precedes the active step. | <CDBStep completeBgColor="green" ... /> | |
| completeTextColor | String | Specifies the step's text color if the step have been completed | <CDBStep completeTextColor="white" ... /> | |
| incompleteBgColor | String | Specifies the step's background color if the step comes after the active step. | <CDBStep incompleteBgColor="red" ... /> | |
| incompleteTextColor | String | Specifies the step's text color if the step comes after the active step. | <CDBStep incompleteTextColor="white" ... /> |
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 and step index is shown | <CDBStepper showTitle ... /> |
| showIndex | boolean | false | defines whether step index is shown | <CDBStep showIndex ... /> |
| mainColor | String | Specifies the steps background color in all state (active, previous, next) | <CDBStep mainColor="gray" ... /> | |
| activeColor | String | Specifies the steps background color in the active state. | <CDBStep activeColor="green" ... /> | |
| completeColor | String | Specifies the steps background color when the steps precede the active state | <CDBStep completeColor="green" ... /> | |
| incompletColor | String | Specifies the steps background color when the steps come after the active step. | <CDBStep incompleteColor="red" ... /> | |
| tooltipColor | String | Specifies the tooltip's background color. | <CDBStep tooltipColor="yellow" ... /> |
Build modern projects using Bootstrap 5 and Contrast
Trying to create components and pages for a web app or website from
scratch while maintaining a modern User interface can be very tedious.
This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants.
Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for
building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.
