Checkbox

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

<Checkbox />

Props

Prop	Type	Default	Description
checked	bool		If true, the component is checked.
checkedIcon	ReactNode	<CheckboxIcon />	The icon to display when the component is checked.
classes	object		Override or extend the styles applied to the component.
color	'primary' \| 'secondary' \| 'default' \| 'success' \| 'archive'	'primary'	The color of the component.
disabled	bool		If true, the checkbox will be disabled.
disableRipple	bool		If true, the ripple effect will be disabled.
icon	ReactNode	<CheckBoxOutlineBlankIcon />	The icon to display when the component is unchecked.
id	string		The id of the input element.
indeterminate	bool	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.
indeterminateIcon	ReactNode	<IndeterminateCheckBoxIcon />	The icon to display when the component is indeterminate.
inputProps	object		Attributes applied to the input element.
inputRef	ref		Pass a ref to the input element.
onChange	(event: object) => void		Callback fired when the state is changed.
required	bool		If true, the input element will be required.
size	medium \| small	medium	The size of the checkbox.
value	any		The 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>
 );
};