Checkbox API
API documentation for the React Checkbox component. Learn about the available props, and the CSS API.
Import
import Checkbox from '@mui/material/Checkbox';
// 或
import { Checkbox } from '@mui/material';Component name
The nameMuiCheckbox can be used when providing default props or style overrides in the theme.属性
Props of the ButtonBase component are also available.
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| checked | bool | false | If true, the component is checked. |
| checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. |
| classes | object | Override or extend the styles applied to the component. See CSS API below for more details. | |
| color | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | 'primary' | The color of the component. It supports those theme colors that make sense for this component. |
| defaultChecked | bool | false | The default checked state. Use when the component is not controlled. |
| disabled | bool | false | 如果被设置为 true，那么该组件将会被禁用。 |
| disableRipple | bool | false | If true, the ripple effect is disabled. |
| icon | node | <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 | node | <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 | func | Callback fired when the state is changed. Signature: function(event: object) => voidevent: The event source of the callback. You can pull out the new checked state by accessing event.target.checked (boolean). | |
| required | bool | false | If true, the input element is required. |
| size | 'medium' | 'small' | string | 'medium' | The size of the checkbox. small is equivalent to the dense checkbox styling. |
| sx | func | object | The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details. | |
| value | any | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. |
ref 则会被传递到根元素中。Inheritance
While not explicitly documented above, the props of the ButtonBase component are also available on Checkbox. You can take advantage of this to target nested components.CSS
| Rule name | Global class | 描述 |
|---|---|---|
| root | .MuiCheckbox-root | Styles applied to the root element. |
| checked | .Mui-checked | Pseudo-class applied to the root element if checked={true}. |
| disabled | .Mui-disabled | Pseudo-class applied to the root element if disabled={true}. |
| indeterminate | .MuiCheckbox-indeterminate | Pseudo-class applied to the root element if indeterminate={true}. |
| colorPrimary | .MuiCheckbox-colorPrimary | Styles applied to the root element if color="primary". |
| colorSecondary | .MuiCheckbox-colorSecondary | Styles applied to the root element if color="secondary". |
You can override the style of the component using one of these customization options:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.