React MUI FormControlLabel API

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  FormControlLabel API. The FormControlLabel helps to add labels to the control components like radio, checkboxes, etc.

Import Statement:

import FormControlLabel from '@mui/material/FormControlLabel';
// or
import { FormControlLabel } from '@mui/material';

FormControlLabel Props:

• control: It refers to the control elements.
• classes: It helps to override styles applied to the component.
• checked: It is a boolean value. It determines whether the component should be displayed selected or not. It is false by default. 
• componentsProps: It refers to the props used for each slot inside.
• disabled: It is a boolean value. It determines whether the control should be in a disabled state or not. It is false by default. 
• disableTypography: It is a boolean value. It determines whether the label should be rendered as it is passed without an additional typography node or not. It is false by default.
• inputRef: It refers to the ref for the input element.
• label: A text for the element.
• label placement: It determines the position of the label.
• onChange: A void callback function that gets triggered when the state is changed.
• slotProps: The props used for each slot.
• sx: A superset of CSS that packages all of the style functions.
• value: It determines the value of the component.

CSS Rules:

• root(.MuiFormControlLabel-root): It is the style applied to the root element.
• labelPlacementStart(.MuiFormControlLabel-labelPlacementStart): The style applied to the root element if labelPlacement=”start”.
• labelPlacementTop(.MuiFormControlLabel-labelPlacementTop): The style applied to the root element if labelPlacement=”top”.
• labelPlacementBottom (.MuiFormControlLabel-labelPlacementBottom): The style applied to the root element if labelPlacement=”bottom”.
• disabled(.Mui-disabled): It is the style applied to the root element if disabled is set to true.
• error(.Mui-error): It is the state class applied to the root element if the error is set to true.
• label(.MuiFormControlLabel-label): It is the style applied to the label’s Typography component. 

Syntax:

<FormControlLabel></FormControlLabel>

Creating React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Step 3: After creating the ReactJS application, Install the required module using the following command:

npm install @mui/material @emotion/react @emotion/styled

Project Structure: It will look like the following.

Example 1: In this example, we added two FormControlLabel Component with controls set as Radio elements.

• App.js

Javascript

import * as React from 'react';
import { FormControlLabel, Radio } from '@mui/material';

export default function App() {

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI FormControlLabel API</h4>
            <b>GeeksforGeeks User? </b>
            <FormControlLabel label="YES"
                value="yes" control={<Radio />} />
            <FormControlLabel label="NO" value="no"
                control={<Radio />} disabled />
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Example 2: We are adding Checkboxes as the control for the FormControlLabel Component. 

• App.js

Javascript

import * as React from 'react';
import { FormControl, FormControlLabel, Checkbox } from '@mui/material';

export default function App() {

    return (
        <div style={{ margin: 10 }}>
            <h1 style={{ color: "green" }}>GeeksforGeeks</h1>
            <h4>React MUI FormControlLabel API</h4>
            <b>
                Select the Programming languages
                you want to learn?
            </b>
            <FormControl>
                <FormControlLabel label="C++"
                    control={<Checkbox value="C++" />} />
                <FormControlLabel label="Python"
                    control={<Checkbox value="Python" />} />
                <FormControlLabel label="C#"
                    control={<Checkbox value="C#" />} />
                <FormControlLabel label="Java"
                    control={<Checkbox value="Java" />} />
                <FormControlLabel label="Go"
                    control={<Checkbox value="Go" />} />
                <FormControlLabel label="Ruby"
                    control={<Checkbox value="Ruby" />} />
            </FormControl>
        </div>
    );
}

Step to Run Application: Run the application using the following command from the root directory of the project.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output.

Reference: https://mui.com/material-ui/api/form-control-label/