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>neveropen</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>neveropen</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/
