Checkbox API
Documentação da API para o componente React Checkbox . Aprenda sobre as propriedades disponíveis e a API CSS.
Importação
import Checkbox from '@mui/material/Checkbox';
// ou
import { Checkbox } from '@mui/material';Nome do componente
The nameMuiCheckbox can be used when providing default props or style overrides in the theme.Propriedades
Propriedades do componente ButtonBase também estão disponíveis.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| checked | bool | false | If true, the component is checked. |
| checkedIcon | node | <CheckBoxIcon /> | The icon to display when the component is checked. |
| classes | object | Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes. | |
| color | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string | 'primary' | The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide. |
| defaultChecked | bool | false | The default checked state. Use when the component is not controlled. |
| disabled | bool | false | Se true, o componente está desabilitado. |
| 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 | Array<func | object | bool> | 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. |
O
ref é encaminhado para o elemento raiz.Herança
Embora não explicitamente documentado acima, as propriedades do componente ButtonBase também estão disponíveis em Checkbox. Você pode tirar vantagem disso para manipular componentes aninhados.CSS
| Nome da regra | Classe global | Descrição |
|---|---|---|
| root | .MuiCheckbox-root | Estilos aplicados ao elemento raiz. |
| checked | .Mui-checked | Pseudo-class aplicada a o elemento raiz se checked={true}. |
| disabled | .Mui-disabled | Pseudo-class aplicada a o elemento raiz se disabled={true}. |
| indeterminate | .MuiCheckbox-indeterminate | Pseudo-class aplicada a o elemento raiz se indeterminate={true}. |
| colorPrimary | .MuiCheckbox-colorPrimary | Estilos aplicados para o elemento raiz se color="primary". |
| colorSecondary | .MuiCheckbox-colorSecondary | Estilos aplicados para o elemento raiz se color="secondary". |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- Com um nome de classe global.
- Com um nome de regra como parte da propriedade
styleOverridesdo componente em um tema personalizado.