Designing a Stepper Form in ReactJS

Last Updated : 13 Nov, 2023

Designing a Stepper Form in React JS displays progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.

Prerequisite:

Approach:

To design a Stepper Form in React JS we will be using Material UI. MUI for react provides components like Stepper, StepperLabel, etc that are required to create a Stepper form and also are easy to implement.

Steps to Create a React Application

Step 1: Create a react app using the following command.

npx create-react-app my-first-app

Step 2: Change the directory to that folder by executing the command :

cd my-first-app

Step 3: Install the necessary dependencies. Go to the directory ‘src’ execute the command prompt there and run the command

npm i @material-ui/core

Project Structure:

The updated dependencies in package.json file.

"dependencies": {
    "@material-ui/core": "^4.12.4",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: This example implements a stepper form using the stepper, stepperlabel components form the mui.

Javascript

// App.js
 
import GeekStepper from './StepperForm'
function App() {
    return (
        <div className="App">
            <GeekStepper />
        </div>
    );
}
 
export default App;

Javascript

// StepperForm.jsx
 
import React from "react";
import {
    makeStyles,
    Theme,
    createStyles,
} from "@material-ui/core/styles";
import Stepper from "@material-ui/core/Stepper";
import Step from "@material-ui/core/Step";
import StepLabel from "@material-ui/core/StepLabel";
import StepContent from "@material-ui/core/StepContent";
import Button from "@material-ui/core/Button";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
 
const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            width: "100%",
        },
        button: {
            marginTop: theme.spacing(1),
            marginRight: theme.spacing(1),
        },
        actionsContainer: {
            marginBottom: theme.spacing(2),
        },
        resetContainer: {
            padding: theme.spacing(3),
        },
    })
);
 
function getSteps() {
    return [
        <b style={{ color: "purple" }}>
            'Enter Personal Details'
        </b>,
        <b style={{ color: "purple" }}>
            'Enter Education Details'
        </b>,
        <b style={{ color: "purple" }}>'Enter Address'</b>,
    ];
}
 
function getStepContent(step: number) {
    switch (step) {
        case 0:
            return (
                <form class="form-group">
                    <label>First Name</label>
                    <input
                        type="text"
                        placeholder="First Name"
                    ></input>
                    <br></br>
                    <label>Last Name</label>
                    <input
                        type="text"
                        placeholder="Last Name"
                    ></input>
                </form>
            );
        case 1:
            return (
                <form class="form-group">
                    <label>High School Percentage</label>
                    <input
                        type="number"
                        placeholder="High School Percentage"
                    ></input>
                    <br></br>
                    <label>Graduation percentage</label>
                    <input
                        type="number"
                        placeholder="Graduation Percentage"
                    ></input>
                </form>
            );
        case 2:
            return (
                <form class="form-group">
                    <label>Permanent Address</label>
                    <input
                        type="text"
                        placeholder="Permanent Address"
                    ></input>
                    <br></br>
                    <label>Temporary Address</label>
                    <input
                        type="text"
                        placeholder="Temporary Address"
                    ></input>
                </form>
            );
        default:
            return "Unknown step";
    }
}
 
export default function GeekStepper() {
    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);
    const steps = getSteps();
 
    const handleNext = () => {
        setActiveStep(
            (prevActiveStep) => prevActiveStep + 1
        );
    };
 
    const handleBack = () => {
        setActiveStep(
            (prevActiveStep) => prevActiveStep - 1
        );
    };
 
    const handleReset = () => {
        setActiveStep(0);
    };
 
    return (
        <div className={classes.root}>
            <h1>GeeksforGeeks Stepper Form</h1>
            <Stepper
                activeStep={activeStep}
                orientation="vertical"
            >
                {steps.map((label, index) => (
                    <Step key={label}>
                        <StepLabel>{label}</StepLabel>
                        <StepContent>
                            <Typography>
                                {getStepContent(index)}
                            </Typography>
                            <div
                                className={
                                    classes.actionsContainer
                                }
                            >
                                <div>
                                    <Button
                                        disabled={
                                            activeStep === 0
                                        }
                                        onClick={handleBack}
                                        className={
                                            classes.button
                                        }
                                    >
                                        Back
                                    </Button>
                                    <Button
                                        variant="contained"
                                        color="primary"
                                        onClick={handleNext}
                                        className={
                                            classes.button
                                        }
                                    >
                                        {activeStep ===
                                        steps.length - 1
                                            ? "Finish"
                                            : "Next"}
                                    </Button>
                                </div>
                            </div>
                        </StepContent>
                    </Step>
                ))}
            </Stepper>
            {activeStep === steps.length && (
                <Paper
                    square
                    elevation={0}
                    className={classes.resetContainer}
                >
                    <Typography>
                        Form is submitted
                    </Typography>
                    <Button
                        onClick={handleReset}
                        className={classes.button}
                    >
                        Reset
                    </Button>
                </Paper>
            )}
        </div>
    );
}