Skip to main content
Checkboxes allow the user to select one or more items from a set.

​
Import

import Checkbox from '@mui/material/Checkbox';

​
Basic Usage

import Checkbox from '@mui/material/Checkbox';

const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } };

export default function Checkboxes() {
  return (
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} />
      <Checkbox {...label} disabled />
      <Checkbox {...label} disabled checked />
    </div>
  );
}

​
Props

​
checked
boolean
If true, the component is checked.
​
defaultChecked
boolean
The default checked state. Use when the component is not controlled.
​
color
'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default'
default:"'primary'"
The color of the component. Supports both default and custom theme colors.
​
size
'small' | 'medium' | 'large'
default:"'medium'"
The size of the component. small is equivalent to the dense checkbox styling.
​
disabled
boolean
default:"false"
If true, the component is disabled.
​
indeterminate
boolean
default:"false"
If true, the component appears indeterminate. This does not set the native input element to indeterminate due to inconsistent behavior across browsers. However, we set a data-indeterminate attribute on the input.
​
disableRipple
boolean
default:"false"
If true, the ripple effect is disabled.
​
checkedIcon
ReactNode
The icon to display when the component is checked. Defaults to <CheckBoxIcon />.
​
icon
ReactNode
The icon to display when the component is unchecked. Defaults to <CheckBoxOutlineBlankIcon />.
​
indeterminateIcon
ReactNode
The icon to display when the component is indeterminate. Defaults to <IndeterminateCheckBoxIcon />.
​
onChange
(event: React.ChangeEvent<HTMLInputElement>) => void
Callback fired when the state is changed. You can pull out the new checked state by accessing event.target.checked (boolean).
​
required
boolean
default:"false"
If true, the input element is required.
​
value
unknown
The value of the component. The DOM API casts this to a string. The browser uses “on” as the default value.
​
sx
SxProps<Theme>
The system prop that allows defining system overrides as well as additional CSS styles.

​
API Reference

Build docs developers (and LLMs) love

Get started for freeTalk to us