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", }} > neveropen </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", }} > neveropen </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/
