React MUI Checkbox API

Material-UI is a user interface framework that provides pre-defined and customizable React components for faster and easy web development. The Material-UI components are based on top Material Design by Google. In this article let’s discuss the Checkbox API in the Material-UI library.

Checkbox API offered by MUI: Checkbox API is used to allow users to select multiple items from a set of items. 

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 indeterminate state.
• indeterminateIcon: It denotes the icon to display when the component is in 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 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 

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

Project Structure:  It will look like the following.

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

npm start

Example 1: In this example, we will try to create a simple application that displays a list of checkbox components in different states.

Now write down the following code in the App.js file. Here, App is our default component where we have written our code:

Filename: App.js

Javascript

import * as React from 'react';
import Checkbox from '@mui/material/Checkbox';

export default function BasicButtonGroup() {
    return (
        <div>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Checkbox API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Checkbox defaultChecked />
                <Checkbox />
                <Checkbox disabled />
                <Checkbox disabled checked />
            </div>
        </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: In this example, let’s create a simple application that displays checkbox components with their respective labels. Change your App.js like the one below.

Javascript

import * as React from 'react';
import Checkbox from '@mui/material/Checkbox';

export default function BasicButtonGroup() {
    return (
        <div>
            <div
                className="head"
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <h1
                    style={{
                        color: "green",
                    }}
                >
                    GeeksforGeeks
                </h1>
                <strong>React MUI Checkbox API</strong>
                <br />
                <br />
            </div>
            <div
                style={{
                    width: "fit-content",
                    margin: "auto",
                }}
            >
                <Checkbox color='secondary' />
                <Checkbox color='success' />
                <Checkbox color='default' />
                <Checkbox color='primary' />
            </div>
        </div>
    );
}

Output:

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