MUI or 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 FormLabel API. The FormLabels are used for placing the label in the desired position and also applying the styles to the label. The FormLabels can be used with any type of input element giving a flexible use. It supports Text fields, buttons, etc. The API provides a lot of functionality and we will learn to implement them.
Import FormLabel API
import FormLabel from '@mui/material/FormLabel';
// or
import { FormLabel } from '@mui/material';
Props List: Here is the list of different props used with this component. We can access them and modify them according to our needs.
- children(node): It is the content of the component.
- classes(object): It overrides or applies styles to the element.
- color(primary/error/info/secondary/success/warning): It is used to set the colour of the component.
- component(elementType): It is the component used for the root node.
- disabled(bool): If set to true, the component will be disabled. The default value is false.
- error(bool): If set to true, the component will show the error state. The default value is false.
- filled(bool): If set to true, the component will be filled classes key. The default value is false.
- focussed(bool): If set to true, the component will be focussed on the first mount. The default value is false.
- required(bool): If set to true, the component input is required to be filled. The default value is false.
- sx (Array<func / object/bool> / func / object): The system prop allows defining system overrides as well as additional CSS styles.
CSS Rules:
- root(.MuiFormLabel-root): It is the style applied to the root element.
- colorSecondary(.MuiFormLabel-colorSecondary): It is the style applied to the root element if the color is secondary.
- focused(.Mui-focused): It is the state class applied to the root element if focused={true}.
- disabled(.Mui-disabled): It is the state class applied to the root element if disabled={true}.
- error(.Mui-error): It is the state class applied to the root element if error={true}.
- filled(.MuiFormLabel-filled): It is the state class applied to the root element if filled={true}.
- required(.Mui-required): It is the state class applied to the root element if required={true}.
- asterisk(.MuiFormLabel-asterisk): It is the style applied to the asterisk element.
Syntax: Create FormLabel as follows:
<FormLabel component="legend">neveropen</FormLabel>
<FormGroup>
<FormControlLabel
value="end"
control={<Checkbox />}/>
</FormGroup>
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
Project Structure:
Step 4: Run the project as follows:
npm start
Example 1: In the following example, we have the FormLabel component with Checkbox
App.js
import "./App.css"; import * as React from "react"; import { Box } from "@mui/material"; import Checkbox from "@mui/material/Checkbox"; import FormGroup from "@mui/material/FormGroup"; import FormControlLabel from "@mui/material/FormControlLabel"; import FormControl from "@mui/material/FormControl"; import FormLabel from "@mui/material/FormLabel"; function App() { return ( <div className="App"> <div className="head" style={{ width: "fit-content", margin: "auto", }} > <h1 style={{ color: "green", }} > neveropen </h1> <strong>React MUI FormLabel API</strong> </div> <br /> <Box sx={{ margin: "auto", display: "flex", justifyContent: "space-evenly", width: "50%", }} > <FormControl component="fieldset"> <FormLabel component="legend"> neveropen </FormLabel> <FormGroup aria-label="position" row> <FormControlLabel value="end" control={<Checkbox />} label="Web Development" labelPlacement="end" /> <FormControlLabel value="start" control={<Checkbox />} label="Coding" labelPlacement="start" /> </FormGroup> </FormControl> </Box> </div> ); } export default App; |
Output:
Example 2: In the following example, we have RadioGroup with FormLabel.
App.js
import "./App.css"; import * as React from "react"; import { Box, Radio, RadioGroup } from "@mui/material"; import FormControlLabel from "@mui/material/FormControlLabel"; import FormControl from "@mui/material/FormControl"; import FormLabel from "@mui/material/FormLabel"; function App() { return ( <div className="App"> <div className="head" style={{ width: "fit-content", margin: "auto", }} > <h1 style={{ color: "green", }} > neveropen </h1> <strong>React MUI FormLabel API</strong> </div> <br /> <Box sx={{ margin: "auto", display: "flex", justifyContent: "space-evenly", width: "50%", }} > <FormControl> <FormLabel> Learn from neveropen </FormLabel> <RadioGroup defaultValue="Algorithms" name="radio-buttons-group"> <FormControlLabel value="Algorithms" control={<Radio />} label="Algorithms" /> <FormControlLabel value="Web Development" control={<Radio />} label="Web Development" /> <FormControlLabel value="Data Structures" control={<Radio />} label="Data Structures" /> </RadioGroup> </FormControl> </Box> </div> ); } export default App; |
Output:
Reference: https://mui.com/material-ui/api/form-label/
