InputLabel API

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

Importação

import InputLabel from '@mui/material/InputLabel';
// ou
import { InputLabel } 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 MuiInputLabel can be used when providing default props or style overrides in the theme.

Propriedades

Props of the FormLabel component are also available.

Nome	Tipo	Padrão	Descrição
children	node		O conteúdo do componente.
classes	object		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		A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente.
disableAnimation	bool	false	If `true`, the transition animation is disabled.
disabled	bool	false	Se `true`, o componente está desabilitado.
error	bool	false	If `true`, the label should be displayed in an error state.
focused	bool	false	If `true`, the `input` of this label is focused.
margin	'dense'		If `dense`, will adjust vertical spacing. This is normally obtained via context from FormControl.
required	bool	false	if `true`, the label will indicate that the `input` is required.
shrink	bool	false	If `true`, the label is shrunk.
sx	func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant	'filled' \| 'outlined' \| 'standard'		A variante a usar.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente FormLabel também estão disponíveis em InputLabel. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regra	Classe global	Descrição
root	.MuiInputLabel-root	Estilos aplicados ao elemento raiz.
focused	.Mui-focused	Pseudo-class aplicada a o elemento raiz se `focused={true}`.
disabled	.Mui-disabled	Pseudo-class aplicada a o elemento raiz se `disabled={true}`.
error	.Mui-error	Pseudo-class aplicada a o elemento raiz se `error={true}`.
required	.Mui-required	Pseudo-class aplicada a o elemento raiz se `required={true}`.
asterisk	.MuiInputLabel-asterisk	Pseudo-class applied to the asterisk element.
formControl	.MuiInputLabel-formControl	Estilos aplicados para o elemento raiz se the component is a descendant of `FormControl`.
sizeSmall	.MuiInputLabel-sizeSmall	Estilos aplicados para o elemento raiz se `size="small"`.
shrink	.MuiInputLabel-shrink	Estilos aplicados para the input element se `shrink={true}`.
animated	.MuiInputLabel-animated	Estilos aplicados em the input element a menos que `disableAnimation={true}`.
filled	.MuiInputLabel-filled	Estilos aplicados para o elemento raiz se `variant="filled"`.
outlined	.MuiInputLabel-outlined	Estilos aplicados para o elemento raiz se `variant="outlined"`.
standard	.MuiInputLabel-standard	Estilos aplicados para o elemento raiz se `variant="standard"`.

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.

Demonstrações

Text Fields