React MUI Checkbox Input

React MUI is a UI library that provides fully-loaded components, bringing our own design system to our production-ready components. MUI is a user interface library that provides predefined and customizable React components for faster and easy web development, these Material-UI components are based on top of Material Design by Google.

In this article, we’ll be discussing React MUI Checkbox Input. A checkbox allows the user to select one or more items from a given set of data. It can be used to turn an option on or off.

React MUI Checkbox Props:

• checked: It determines whether the component is checked.
• checkedIcon: It denotes the icon to display when the component is checked.
• classes: It denotes the styles to override the default ones.
• color: It denotes the color of the component.
• defaultChecked: It determines whether the component is checked by default.
• disabled: It determines whether the component is disabled.
• disableRipple: It determines whether the ripple effect is disabled on the component.
• icon: It denotes the icon to display when the component is unchecked.
• id: It denotes the id of the input element.
• indeterminate: It determines whether the component is in an indeterminate state.
• indeterminateIcon: It denotes the icon to display when the component is in an indeterminate state.
• inputProps: It denotes the list of attributes applied to the input element.
• inputRef: It denotes a ref that is passed to the input element.
• onChange: It denotes a callback function that is triggered when the state of the checkbox is changed.
• required: It determines whether the input element is required.
• size: It denotes the size of the component.
• sx: It denotes a system prop that allows defining system overrides as well as additional CSS styles.
• value: It denotes the value of the component.

Syntax:

<Checkbox {...label} defaultChecked />

Creating React Project:

Step 1: To create a react app, you need to install react modules through the npm command.

npm create-react-app project name

Step 2: After creating your react project, move into the folder to perform different operations.

cd project name

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:

Step to Run Application:

npm start

Example 1: Below example demonstrates the React MUI Checkbox with labels in different sizes and colors.

Javascript

import React from "react";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import Checkbox from "@mui/material/Checkbox";

function App() {
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Checkbox input</h2>
            </div>
            <div style={{ paddingLeft: 20 }}>
                <FormGroup>
                    <FormControlLabel
                        control={<Checkbox defaultChecked
                        size="small"
                        color="success" />}
                        label="Small Checkbox"
                    />
                    <FormControlLabel
                        control={<Checkbox defaultChecked
                        color="secondary" />}
                        label="Medium Checkbox"
                    />
                    <FormControlLabel
                        control={<Checkbox color="error" />}
                        label="Large Checkbox"
                        sx={{ "& .MuiSvgIcon-root":
                            { fontSize: 28 } }}
                    />
                </FormGroup>
            </div>
        </div>
    );
}

export default App;

Output:

Example 2: Below example demonstrates the React MUI indeterminate checkbox. In an indeterminate state, a checkbox input can only have two states in a form: checked or unchecked and it either submits its value or doesn’t. And If we see visually, we find three states in a checkbox: checked, unchecked, or indeterminate.

Javascript

import React from "react";
import Box from "@mui/material/Box";
import Checkbox from "@mui/material/Checkbox";
import FormControlLabel from "@mui/material/FormControlLabel";

function App() {

    const [checked, setChecked] = React.useState([true, false]);
    const handleChange1 = (event) => {
        setChecked([event.target.checked,
            event.target.checked]);
    };
    const handleChange2 = (event) => {
        setChecked([event.target.checked, checked[1]]);
    };
    const handleChange3 = (event) => {
        setChecked([checked[0], event.target.checked]);
    };

    const children = (
        <Box sx={{ display: "flex",
            flexDirection: "column", ml: 3 }}>
            <FormControlLabel
                label="Child Element 1"
                control={<Checkbox checked={checked[0]}
                onChange={handleChange2} color="success" />}
            />
            <FormControlLabel
                label="Child Element 2"
                control={<Checkbox checked={checked[1]}
                onChange={handleChange3} color="success" />}
            />
        </Box>
    );
    return (
        <div>
            <div style={{ textAlign: "center", color: "green" }}>
                <h1>GeeksforGeeks</h1>
                <h2>React MUI Checkbox input</h2>
            </div>
            <div style={{ paddingLeft: 20 }}>
                <FormControlLabel
                    label="Parent Element"
                    control={
                        <Checkbox
                            checked={checked[0] && checked[1]}
                            indeterminate={checked[0] !== checked[1]}
                            onChange={handleChange1}
                            color="success"
                        />
                    }
                />
                {children}
            </div>
        </div>
    );
}

export default App;

Output:

Reference: https://mui.com/material-ui/react-checkbox/