<Checkbox />
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).
<div style={{ display: 'flex', justifyContent: 'space-around' }}><Checkbox checked inputProps={{ 'aria-label': 'primary checkbox' }} /><Checkbox inputProps={{ 'aria-label': 'primary checkbox' }} /><CheckboxindeterminateinputProps={{ 'aria-label': 'indeterminate checkbox' }}/><Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} /><CheckboxdisabledcheckedinputProps={{ 'aria-label': 'disabled checked checkbox' }}/><CheckboxdisabledindeterminateinputProps={{ 'aria-label': 'disabled indeterminate checkbox' }}/></div>
<FormControl sx={{ m: 3 }} component="fieldset" variant="standard"><FormLabel component="legend">Assign responsibility</FormLabel><FormGroup sx={{ display: 'flex', justifyContent: 'space-around' }}><FormControlLabelcontrol={<Checkbox checked name="checkedA" tabIndex={-1}/>}label="Secondary"tabIndex={0}/><FormControlLabelcontrol={<Checkbox name="checkedC" tabIndex={-1}/>}label="Uncontrolled"tabIndex={0}/><FormControlLabelcontrol={<Checkbox name="checkedF" tabIndex={-1} indeterminate />}label="Indeterminate"tabIndex={0}/><FormControlLabeldisabledcontrol={<Checkbox name="checkedD" />}label="Disabled"/><FormControlLabeldisabledcontrol={<Checkbox checked name="checkedE" />}label="Disabled"/><FormControlLabeldisabledcontrol={<Checkbox name="checkedG" indeterminate/>}label="Disabled"/></FormGroup></FormControl>