Designing a Stepper Form in ReactJS - GeeksforGeeks

19 Sep, 2021
Steppers display 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.
In this article, we will learn how to create a vertical stepper form using react and material-ui. We will create a vertical stepper and add a form container to it. At all stages of stepper-form, we will add different details. It’s just like you have different stages to fill-up the form and after completing all the steps you will reach the final.
Creating React-app
Step 1: Create react app using the following command.
npx create-react-app my-first-app
 
Step 2: Change directory to that folder by executing command :
cd my-first-app
Step 3: Install the necessary dependencies. Go to the directory ‘src’ and execute command prompt there and run command
npm install @material-ui/core/Stepper
npm install @material-ui/core/Step
npm install @material-ui/core/StepLabel
File Structure: It will look like the following.
Step 4: Importing < GeekStepper/> component in root component.
App.js
import GeekStepper from './StepperForm'function App() {  return (    <div className="App">      <GeekStepper />    </div>  );}  export default App;
Step 5: In this file, we will implement Stepper Form to submit Personal Details, Education Details, and Address of a user. Stepper is created using material-ui in react. We have imported different ui-classes in this component like Stepper, StepLabel etc. 
Form is implemented using proactive step and ActiveStep. These steps are used to display the component of the form which is active and to return back.
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>  );}
Step to run the application: Run your app by executing below command in src
npm start
Output:
Blogathon-2021
React-Questions
Blogathon
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Import JSON Data into SQL Server?
How to Install Tkinter in Windows?
How to Create a Table With Multiple Foreign Keys in SQL?
How to pass data into table from a form using React Components
SQL - Multiple Column Ordering
How to fetch data from an API in ReactJS ?
How to redirect to another page in ReactJS ?
How to pass data from child component to its parent in ReactJS ?
Create a Responsive Navbar using ReactJS
How to pass data from one component to other component in ReactJS ?