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!
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
Related Posts:
- How to Create a Material-UI Select Component with Checkboxes
- How to Create a Material-UI Treeview with Styled Checkboxes
- Every Material-UI Form Component Explained (MUI v5)
- The Ultimate Guide to Material-UI FormControl: 3 Examples
- The Ultimate MUI Switch Example: Color, onChange, More
- Custom FormControlLabel Examples: Font Size, Width, Error