Designing a Stepper Form in ReactJS
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>w3wiki 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: This output will be visible on the http://localhost:3000/ on the browser window.
Contact Us