React MUI Checkbox API
Last Updated :
14 Oct, 2022
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/
Share your thoughts in the comments
Please Login to comment...