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 { 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

Basic Information

Personal Data

Terms and Conditions

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

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	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

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

Slider

Spinner