Pular para o conteúdo

FormLabel API

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

Importação

import FormLabel from '@mui/material/FormLabel';
// ou
import { FormLabel } from '@mui/material';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

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

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
childrennode
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'error'
| 'info'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| string
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
disabledboolfalse
If true, the label should be displayed in a disabled state.
errorboolfalse
If true, the label should be displayed in an error state.
filledboolfalse
If true, the label should use filled classes key.
focusedboolfalse
If true, the input of this label is focused (used by FormGroup components).
requiredboolfalse
If true, the label will indicate that the input is required.
sxArray<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.

O ref é encaminhado para o elemento raiz.

CSS

Nome da regraClasse globalDescrição
root.MuiFormLabel-rootEstilos aplicados ao elemento raiz.
colorSecondary.MuiFormLabel-colorSecondaryEstilos aplicados para o elemento raiz se the color is secondary.
focused.Mui-focusedPseudo-class aplicada a o elemento raiz se focused={true}.
disabled.Mui-disabledPseudo-class aplicada a o elemento raiz se disabled={true}.
error.Mui-errorPseudo-class aplicada a o elemento raiz se error={true}.
filled.MuiFormLabel-filledPseudo-class aplicada a o elemento raiz se filled={true}.
required.Mui-requiredPseudo-class aplicada a o elemento raiz se required={true}.
asterisk.MuiFormLabel-asteriskEstilos aplicados a the asterisk element.

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

Demonstrações