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