React MUI FormLabel API

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">GeeksforGeeks</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",
                    }}
                >
                    GeeksforGeeks
                </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">
                     GeeksforGeeks
                     </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",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI FormLabel API</strong>
            </div>
            <br />
            <Box
                sx={{
                    margin: "auto",
                    display: "flex",
                    justifyContent: "space-evenly",
                    width: "50%",
                }}
            >
                <FormControl>
                    <FormLabel>
                      Learn from GeeksforGeeks
                    </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/