Checkbox

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

<Checkbox />

Props

PropTypeDefaultDescription
checkedboolIf true, the component is checked.
checkedIconReactNode<CheckboxIcon />The icon to display when the component is checked.
classesobjectOverride or extend the styles applied to the component.
color'primary' | 'secondary' | 'default' | 'success' | 'archive''primary'The color of the component.
disabledboolIf true, the checkbox will be disabled.
disableRippleboolIf true, the ripple effect will be disabled.
iconReactNode<CheckBoxOutlineBlankIcon />The icon to display when the component is unchecked.
idstringThe id of the input element.
indeterminateboolfalseIf 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.
indeterminateIconReactNode<IndeterminateCheckBoxIcon />The icon to display when the component is indeterminate.
inputPropsobjectAttributes applied to the input element.
inputRefrefPass a ref to the input element.
onChange(event: object) => voidCallback fired when the state is changed.
requiredboolIf true, the input element will be required.
sizemedium | smallmediumThe size of the checkbox.
valueanyThe value of the component.

The ref is forwarded to the root element.

Any other props supplied will be provided to the root element (IconButton).

Examples

Simple Checkboxes

<div style={{ display: 'flex', justifyContent: 'space-around' }}>
<Checkbox checked inputProps={{ 'aria-label': 'primary checkbox' }} />
<Checkbox inputProps={{ 'aria-label': 'primary checkbox' }} />
<Checkbox
indeterminate
inputProps={{ 'aria-label': 'indeterminate checkbox' }}
/>
<Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
<Checkbox
disabled
checked
inputProps={{ 'aria-label': 'disabled checked checkbox' }}
/>
<Checkbox
disabled
indeterminate
inputProps={{ 'aria-label': 'disabled indeterminate checkbox' }}
/>
</div>

Checkbox with FormLabel

() => {
const [checkedStates, setCheckedStates] = React.useState({
checkedC: false
});
const handleKeyDown = (event) => {
if (event.key === ' ') {
const checkbox = event.currentTarget.querySelector('input[type="checkbox"]');
if (checkbox && !checkbox.disabled) {
setCheckedStates(prevStates => ({
...prevStates,
[checkbox.name]: !prevStates[checkbox.name]
}));
event.preventDefault();
}
}
};
return (
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
<FormLabel component="legend">Assign responsibility</FormLabel>
<FormGroup sx={{ display: 'flex', justifyContent: 'space-around' }}>
<FormControlLabel
control={<Checkbox checked name="checkedA" tabIndex={-1}/>}
label="Secondary"
tabIndex={0}
onKeyDown={handleKeyDown}
/>
<FormControlLabel
control={<Checkbox name="checkedC" checked={checkedStates.checkedC} tabIndex={-1}/>}
label="Uncontrolled"
tabIndex={0}
onKeyDown={handleKeyDown}
/>
<FormControlLabel
control={<Checkbox name="checkedF" tabIndex={-1} indeterminate />}
label="Indeterminate"
tabIndex={0}
onKeyDown={handleKeyDown}
/>
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
label="Disabled"
onKeyDown={handleKeyDown}
/>
<FormControlLabel
disabled
control={<Checkbox checked name="checkedE" />}
label="Disabled"
onKeyDown={handleKeyDown}
/>
<FormControlLabel
disabled
control={<Checkbox name="checkedG" indeterminate/>}
label="Disabled"
onKeyDown={handleKeyDown}
/>
</FormGroup>
</FormControl>
);
};