Awesome MUI Checkbox Examples: Color, Size, Labels, More

The Material UI Checkbox component can be customized either with props or by creating nested selectors. The checkbox has lots of default classes applied based on its state (checked, error, disabled) that can be used to customize the icon color and size.

In this tutorial, I will create the below checkbox. It has custom checked and unchecked icons, the label color changes based on selected state, and box shadow appears on hover.

The Complete Checkbox Tutorial section has full code for this example. Also, check out my new MUI course on Udemy!

Table of Contents hide

1 MUI Checkbox Color

2 MUI Checkbox Label

3 MUI Checkbox onChange and Checked

4 MUI Checkbox Size and Custom Icons

5 MUI Checkbox Hover

6 Complete MUI Checkbox Tutorial

7 Resources

See a video version of this post on YouTube or watch below:

MUI Checkbox Color

The Material UI Checkbox can be passed a theme color through the color prop:

<Checkbox color="secondary"/>

However, this prop is limited to theme colors. To pass any color, use the sx prop. You can also customized whether color is set when the component is checked or unchecked. Here’s an example:

<Checkbox 
  sx={{
    "&.Mui-checked": {
      color: '#800080'
    }
  }}
/>

MUI Checkbox Label

The Checkbox Label us usually a FormControlLabel component. This wraps the checkbox and renders a label element to the right (‘end) by default.

Here’s example code:

<FormControlLabel

  control={
    <Checkbox 
      name="react" 
      checked={react}
    />
  label="React"
/>

We can customize the size with the proper nested selector. First we have to find the best class to target in the DOM.

It looks like we want to target the MuiFormControlLabel-label class. Target this if we only want to customize the label, not the checkbox.

const formControlLabelStyle = {
  "& .MuiFormControlLabel-label": {
    fontSize: '1.5rem'
  }
}

We can also control the color based on checked state:

sx={{...formControlLabelStyle, color: state.react? '#800080' : ''}}

In this code the sx prop has a ternary that only applies color if the state.react value is true.

The FormControlLabel is also often used on Radios.

MUI Checkbox onChange and Checked

The MUI docs have a great example of handling checkbox on change. My values are different, but it is a typical setState/handleChange combo (see the full code section below).

Importantly, remember to add name and checked to the Checkbox, like this:

<Checkbox name="react" checked={react} />

Without these fields, the Checkbox won’t be hooked into the state values properly.

MUI Checkbox Size and Custom Icons

We can target the MuiSvgIcon-root class on the checkbox in order to increase the size of the actual Checkbox icon. This works no matter what icon is applied.

<Checkbox
sx={{
  "& .MuiSvgIcon-root": {
    fontSize: '2rem'
  }
}}
/>

To change the icons, we need two props: checkedIcon and icon. The icon prop only changes the unchecked icon (the default empty square is actually an icon). The checkedIcon prop will apply only when the checkbox is checked.

Here are the two values I used:

<Checkbox checkedIcon={<CheckCircleOutlineIcon/>} icon={<HighlightOffIcon/>} />

MUI Checkbox Hover

Hover can be applied to the Checkbox root. No nested selectors are needed.

<Checkbox 
  sx={{
    "&:hover": {
      boxShadow: 3
    }
  }}
/>

I targeted the hover pseudo-class that the browser applies. Notice the syntax and lack of a space between the & and the :.

Complete MUI Checkbox Tutorial

Here is the full code for this example that combines everything we have customized:

import * as React from "react";
import FormLabel from "@mui/material/FormLabel";
import FormControl from "@mui/material/FormControl";
import FormGroup from "@mui/material/FormGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormHelperText from "@mui/material/FormHelperText";
import Checkbox from "@mui/material/Checkbox";
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
import HighlightOffIcon from '@mui/icons-material/HighlightOff';
import Paper from "@mui/material/Paper";

const checkboxStyle = {
  "&:hover": {
    boxShadow: 3
  },
  "&.Mui-checked": {
    color: '#800080'
  },
  "& .MuiSvgIcon-root": {
    fontSize: '2rem'
  }
}

const formControlLabelStyle = {
  "& .MuiFormControlLabel-label": {
    fontSize: '1.5rem'
  }
}

export default function CheckboxForm() {
  const [state, setState] = React.useState({
    react: true,
    mui: true,
    typescript: false,
  });

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setState({
      ...state,
      [event.target.name]: event.target.checked,
    });
  };

  const { react, mui, typescript } = state;

  return (
    <form>
      <Paper sx={{ padding: 4 }}>
        <FormControl
          required
          //error={true}
          component="fieldset"
          sx={{ m: 3 }}
          variant="standard"
        >
          <FormLabel component="legend">Pick your stack</FormLabel>
          <FormGroup>
            <FormControlLabel
              sx={{...formControlLabelStyle, color: state.react? '#800080' : ''}}
              control={
                <Checkbox 
                  name="react" 
                  checked={react} 
                  checkedIcon={<CheckCircleOutlineIcon/>} 
                  icon={<HighlightOffIcon/>} 
                  onChange={handleChange} 
                  sx={checkboxStyle}
                  //size="small"

                  //color="secondary"
                  //labelPlacement="top"
                />
              }
              label="React"
              
            />
            <FormControlLabel
              sx={{...formControlLabelStyle, color: state.mui? '#800080' : ''}}
              control={
                <Checkbox 
                  name="mui" 
                  checked={mui} 
                  checkedIcon={<CheckCircleOutlineIcon/>} 
                  icon={<HighlightOffIcon/>} 
                  onChange={handleChange} 
                  sx={checkboxStyle}/>
              }
              label="MUI"
            />
            <FormControlLabel
              sx={{...formControlLabelStyle, color: state.typescript? '#800080' : ''}}
              control={
                <Checkbox 
                  name="typescript" 
                  checked={typescript} 
                  checkedIcon={<CheckCircleOutlineIcon/>} 
                  icon={<HighlightOffIcon/>} 
                  onChange={handleChange} 
                  sx={checkboxStyle}
                />
              }
              label="TypeScript"
            />
          </FormGroup>
          <FormHelperText>Custom Checkboxes!</FormHelperText>
        </FormControl>
      </Paper>
    </form>
  );
}

Resources

MUI Checkbox Docs

Share this post: