In this tutorial, we will create Checkbox using react material ui (mui 5). We will see mui 5 checkbox lable, checkbox sizes, checkbox with icon example with react material UI 5.
Install & Setup Vite + React + Typescript + MUI 5
React Material UI 5 Checkbox Example
1. react mui 5 simple checkbox component with default check, disabled and disabled checked.
import { Checkbox } from "@mui/material";
const label = { inputProps: { "aria-label": "Checkbox demo" } };
export default function checkboxes() {
return (
<>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} />
<Checkbox {...label} disabled />
<Checkbox {...label} disabled checked />
</>
);
}
2. react mui 5 label Checkbox with FormControlLabel component.
import { Checkbox, FormControlLabel, FormGroup } from "@mui/material";
export default function checkboxes() {
return (
<>
<FormGroup>
<FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
<FormControlLabel disabled control={<Checkbox />} label="Disabled" />
</FormGroup>
</>
);
}
3. react mui 5 Checkbox sizes.
import { Checkbox } from "@mui/material";
const label = { inputProps: { "aria-label": "Checkbox demo" } };
export default function checkboxes() {
return (
<>
<Checkbox {...label} defaultChecked size="small" />
<Checkbox {...label} defaultChecked />
<Checkbox
{...label}
defaultChecked
sx={{ "& .MuiSvgIcon-root": { fontSize: 28 } }}
/>
<Checkbox
{...label}
defaultChecked
sx={{ "& .MuiSvgIcon-root": { fontSize: 36 } }}
/>
</>
);
}
4. react mui 5 Checkbox with secondary, success, error, and pink color.
import { Checkbox } from "@mui/material";
import { pink } from "@mui/material/colors";
const label = { inputProps: { "aria-label": "Checkbox demo" } };
export default function checkboxes() {
return (
<>
<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="success" />
<Checkbox {...label} defaultChecked color="error" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
{...label}
defaultChecked
sx={{
color: pink[800],
"&.Mui-checked": {
color: pink[600],
},
}}
/>
</>
);
}
To Use Checkbox component with icon you need to install mui icons.
Install the package in your project directory with:
# with npm
npm install @mui/icons-material
# with yarn
yarn add @mui/icons-material
5. react mui 5 Checkbox with Bookmark and Favorite icons.
import Checkbox from "@mui/material/Checkbox";
import FavoriteBorder from "@mui/icons-material/FavoriteBorder";
import Favorite from "@mui/icons-material/Favorite";
import BookmarkBorderIcon from "@mui/icons-material/BookmarkBorder";
import BookmarkIcon from "@mui/icons-material/Bookmark";
const label = { inputProps: { "aria-label": "Checkbox demo" } };
export default function IconCheckboxes() {
return (
<>
<Checkbox
{...label}
icon={<FavoriteBorder />}
checkedIcon={<Favorite />}
/>
<Checkbox
{...label}
icon={<BookmarkBorderIcon />}
checkedIcon={<BookmarkIcon />}
/>
</>
);
}
6. react mui 5 control the checkbox with the checked and onChange props.
import Checkbox from '@mui/material/Checkbox';
export default function ControlledCheckbox() {
const [checked, setChecked] = React.useState(true);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
};
return (
<Checkbox
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'controlled' }}
/>
);
}
7. react mui 5 checkbox parent children.
import Box from '@mui/material/Box';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
export default function IndeterminateCheckbox() {
const [checked, setChecked] = React.useState([true, false]);
const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked([event.target.checked, event.target.checked]);
};
const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked([event.target.checked, checked[1]]);
};
const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked([checked[0], event.target.checked]);
};
const children = (
<Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
<FormControlLabel
label="Child 1"
control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
/>
<FormControlLabel
label="Child 2"
control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
/>
</Box>
);
return (
<div>
<FormControlLabel
label="Parent"
control={
<Checkbox
checked={checked[0] && checked[1]}
indeterminate={checked[0] !== checked[1]}
onChange={handleChange1}
/>
}
/>
{children}
</div>
);
}