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.
Javascript
// App.jsimport 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.
Javascript
// StepperForm.jsximport 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>neveropen 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:
