Material-UI is a UI library providing predefined robust and customizable components for React for easier web development. The MUI design is based on top of Material Design by Google.
In this article, we will discuss the React MUI StepLabel API. The Steppers are used to convey numbers in some steps. The Step is one of the multiple steps from the Stepper which provides the content and other features. The StepLabel is used to place the label on the Stepper. The API provides a lot of functionality and we will learn to implement them.
Import StepLabel API:
import StepLabel from '@mui/material/StepLabel';
// or
import { StepLabel } from '@mui/material';Props List: Here is the list of props used with this component. We can access them and modify them according to our needs.
- children (node): It is the title or content of the StepLabel which is a single string.
- classes (object): This overrides the existing styles or adds new styles to the component.
- componentsProps(object): It is the props applied to the component of the StepLabel. The default value is an empty array of props.
- error(bool): If set to true, the step is marked as an error or failure. The default value is false.
- icon(node): It overrides the default StepIcon and places an icon on the stepper.
- optional(node): It displays the optional node or message in the step.
- StepIconComponent(component): It is placed to replace the StepIcon component.
- StepIconProps(object): It is the list of props applied to the StepIcon component.
- sx (Array<func/object/bool> func/object): The system prop allows defining system overrides as well as additional CSS styles.
CSS Rules:
- root (.MuiStepLabel-root): It is the style applied to the root element.
- horizontal(.MuiStepLabel-horizontal): It is the style applied to the root element if orientation is set to horizontal.
- vertical(.MuiStepLabel-vertical): It is the style applied to the root element if orientation is set to vertical.
- label(.MuiStepLabel-label): It is the style applied to the label element that wraps children’s props.
- active(.Mui-active): It is the state class applied to the label element if active is set to true.
- completed(.Mui-completed): It is the state class applied to the label element if completed is true.
- error(.Mui-error): It is the state class applied to the root and labels elements if the error is true.
- disabled(.Mui-disabled): It is the state class applied to the root and labels elements if disabled is true.
- iconContainer(.MuiStepLabel-iconContainer): It is the style applied to the icon component element.
- alternativeLabel(.MuiStepLabel-alternativeLabel): It is the state class applied to the root and icon container and label if alternativeLabel is true.
- labelContainer(.MuiStepLabel-labelContainer): It is the style applied to the container element which wraps label and optional.
Syntax: Create a StepLabel as follows:
<Step> <StepLabel>HTML</StepLabel> </Step>
Installing and Creating React app, and adding the MUI dependencies:
Step 1: Create a react project using the following command.
npx create-react-app gfg_tutorial
Step 2: Get into the project directory
cd gfg_tutorial
Step 3: Install the MUI dependencies as follows:
npm install @mui/material @emotion/react npm install @emotion/styled @mui/lab @mui/icons-material
Step 4: Run the project as follows:
npm start
Example 1: In the following example, we have multiple StepLabel in the Stepper.
App.js
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
const steps = [ "Select campaign settings",
"Create an ad group",
"Create an ad",
]; function App() {
const [activeStep, setActiveStep] = React.useState(0);
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI StepLabel API</strong>
</div>
<br />
<Box sx={{ width: "40%", margin: "auto" }}>
<Stepper activeStep={activeStep}>
<Step>
<StepLabel>HTML</StepLabel>
</Step>
<Step>
<StepLabel>CSS</StepLabel>
</Step>
<Step>
<StepLabel>Javascript</StepLabel>
</Step>
</Stepper>
{activeStep === steps.length ? (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
All steps completed</Typography>
<Box
sx={{
display: "flex",
flexDirection: "row",
pt: 2,
}}
>
<Box sx={{ flex: "1 1 auto" }} />
<Button onClick={handleReset}>
Reset</Button>
</Box>
</React.Fragment>
) : (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
Step {activeStep + 1}</Typography>
<Box
sx={{
display: "flex",
flexDirection: "row",
pt: 2,
}}
>
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
Back
</Button>
<Box sx={{ flex: "1 1 auto" }} />
<Button onClick={handleNext}>
{activeStep === steps.length - 1
? "Finish" : "Next"}
</Button>
</Box>
</React.Fragment>
)}
</Box>
</div>
);
} export default App;
|
Output:
Example 2: In the following example, the StepLabel CSS is marked as an error step.
App.js
import "./App.css";
import * as React from "react";
import Box from "@mui/material/Box";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";
const steps = [ "Select campaign settings",
"Create an ad group",
"Create an ad",
]; function App() {
const [activeStep, setActiveStep] = React.useState(0);
const handleNext = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 1);
};
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const handleReset = () => {
setActiveStep(0);
};
return (
<div className="App">
<div
className="head"
style={{
width: "fit-content",
margin: "auto",
}}
>
<h1
style={{
color: "green",
}}
>
GeeksforGeeks
</h1>
<strong>React MUI StepLabel API</strong>
</div>
<br />
<Box sx={{ width: "40%", margin: "auto" }}>
<Stepper activeStep={activeStep}>
<Step>
<StepLabel>HTML</StepLabel>
</Step>
<Step>
<StepLabel error>CSS</StepLabel>
</Step>
<Step>
<StepLabel>Javascript</StepLabel>
</Step>
</Stepper>
{activeStep === steps.length ? (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
All steps completed</Typography>
<Box
sx={{
display: "flex",
flexDirection: "row",
pt: 2,
}}
>
<Box sx={{ flex: "1 1 auto" }} />
<Button onClick={handleReset}>
Reset</Button>
</Box>
</React.Fragment>
) : (
<React.Fragment>
<Typography sx={{ mt: 2, mb: 1 }}>
Step {activeStep + 1}</Typography>
<Box
sx={{
display: "flex",
flexDirection: "row",
pt: 2,
}}
>
<Button
color="inherit"
disabled={activeStep === 0}
onClick={handleBack}
sx={{ mr: 1 }}
>
Back
</Button>
<Box sx={{ flex: "1 1 auto" }} />
<Button onClick={handleNext}>
{activeStep === steps.length - 1
? "Finish" : "Next"}
</Button>
</Box>
</React.Fragment>
)}
</Box>
</div>
);
} export default App;
|
Output:
Reference: https://mui.com/material-ui/api/step-label/