FormControlLabel API

Documentação da API para o componente React FormControlLabel . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import FormControlLabel from '@mui/material/FormControlLabel';
// ou
import { FormControlLabel } from '@mui/material';

Drop-in replacement of the Radio, Switch and Checkbox component. Use this component if you want to display an extra label.

The name MuiFormControlLabel can be used when providing default props or style overrides in the theme.

Props of the nativo component are also available.

Nome	Tipo	Padrão	Descrição
control^*	element		A control element. For instance, it can be a `Radio`, a `Switch` or a `Checkbox`.
checked	bool	false	If `true`, the component appears selected.
classes	object		Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentsProps	object	{}
disabled	bool	false	If `true`, the control is disabled.
disableTypography	bool	false	If `true`, the label is rendered as it is passed without an additional typography node.
inputRef	ref		Pass a ref to the `input` element.
label	node		The text to be used in an enclosing label element.
labelPlacement	'bottom' \| 'end' \| 'start' \| 'top'	'end'	The position of the label.
onChange	func		Callback fired when the state is changed. Signature: `function(event: object) => void` event: The event source of the callback. You can pull out the new checked state by accessing `event.target.checked` (boolean).
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.

O ref é encaminhado para o elemento raiz.

Nome da regra	Classe global	Descrição
root	.MuiFormControlLabel-root	Estilos aplicados ao elemento raiz.
labelPlacementStart	.MuiFormControlLabel-labelPlacementStart	Estilos aplicados para o elemento raiz se `labelPlacement="start"`.
labelPlacementTop	.MuiFormControlLabel-labelPlacementTop	Estilos aplicados para o elemento raiz se `labelPlacement="top"`.
labelPlacementBottom	.MuiFormControlLabel-labelPlacementBottom	Estilos aplicados para o elemento raiz se `labelPlacement="bottom"`.
disabled	.Mui-disabled	Pseudo-class aplicada a o elemento raiz se `disabled={true}`.
label	.MuiFormControlLabel-label	Estilos aplicados a the label's Typography component.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

With a global class name.
With a rule name as part of the component's styleOverrides property in a custom theme.