react mui 5 checkbox example

React MUI 5 Checkbox Example

updated 18/01/23 By frontendshape

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 />
    </>
  );
}
react mui 5 checkbox

react mui 5 checkbox


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>
    </>
  );
}
react mui 5 checkbox FormControlLabel component

react mui 5 checkbox FormControlLabel component

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 } }}
      />
    </>
  );
}
react material ui 5 checkbox sizes

react material ui 5 checkbox sizes


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],
          },
        }}
      />
    </>
  );
}
react mui 5 checkbox colors props

react mui 5 checkbox colors props

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 />}
      />
    </>
  );
}
react material ui 5 checkbox with icons

react material ui 5 checkbox with icons


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>
 );
}
mui 5 checkbox parent children

mui 5 checkbox parent children