Input

Campo de texto para formulários e entrada de dados do usuário, com estilo e recursos de acessibilidade embutidos.

Exemplos

Input de texto

Padrão (label estático)

Label flutuante

Texto de ajuda, desabilitado e inválido

Com ícones

Tamanho médio (md)

Tamanho médio com texto de ajuda, desabilitado e inválido

Input numérico

Padrão (label estático)

Label flutuante

Texto de ajuda, desabilitado e inválido

Com ícones

Tamanho médio

Input de senha

Com texto de ajuda

Senha inválida

API

Input

Elemento de input de texto.

O <input> fica sempre dentro de um container (data-slot="input-adornment"), mesmo sem ícones. Sem ícones, ele usa display: contents e não muda o layout. É esse container que mantém o texto e o foco quando o ícone de alerta do invalid aparece ou some. Por isso o <input> não é irmão de um elemento passado depois do Input, e seletores como peer-*, ~ e + não o alcançam. Para estilizar o rótulo ou outros elementos conforme o estado do campo, use o InputWrapper com o InputLabel, que reagem ao foco, ao valor e ao invalid pelo group-has.

Propriedade	Tipo	Padrão	Descrição
type	"text" | "email" | "numeric" | "password"	"text"	Variante do input. "email" mostra um ícone Mail padrão à esquerda. Em "text" e "email", definir invalid mostra um ícone de triângulo de alerta à direita. "numeric" renderiza um input numérico com botões de stepper. "password" renderiza um campo de senha com ícone de cadeado e botão de mostrar/ocultar.
size	"md" | "lg"	"lg"	Altura do input e escala do ícone e do label. "md" usa 40px de altura, ícones de 20px, label de placeholder de 14px e steppers numéricos menores.
min	number	-	Quando o type é numeric, define o valor mínimo permitido. Atributo HTML padrão. Com o campo vazio, as setas do teclado e os botões de aumentar e diminuir vão para min quando ele é maior que zero (nunca acima de max); caso contrário, começam do zero.
max	number	-	Quando o type é numeric, define o valor máximo permitido. Os steppers e as setas do teclado param nesse limite.
step	number	1	Quando o type é numeric, define o incremento aplicado pelos steppers e pelas teclas ArrowUp/ArrowDown.
readOnly	boolean	false	Quando o type é numeric, os steppers ficam desabilitados e as setas do teclado deixam de mudar o valor.
iconLeft	React.ReactElement	-	Ícone ou elemento no início do input. No type "numeric", só o slot da esquerda é usado (os steppers ficam à direita). É ignorado no type "password", que sempre mostra o ícone de cadeado (Lock).
iconRight	React.ReactElement	-	Ícone ou elemento no fim do input. Não é usado nos types "numeric" e "password". Nos types "text" e "email", quando invalid é true, o ícone de alerta embutido substitui qualquer iconRight personalizado. O texto e o rótulo em repouso param a 12px do ícone no "lg" e a 10px no "md", espelhando o espaço do ícone do início. Clicar num ícone comum foca o campo; um button, um link ou um elemento com role="button" passado aqui continua recebendo o clique.
showPasswordLabel	string	"Mostrar senha"	Label acessível do botão de visibilidade quando a senha está oculta. Só para o type "password".
hidePasswordLabel	string	"Ocultar senha"	Label acessível do botão de visibilidade quando a senha está visível. Só para o type "password".
disabled	boolean	false	Desabilita o input e os steppers (numeric). Atributo HTML padrão.
invalid	boolean	false	Quando true, ativa o estilo de estado de erro. Nos types "text" e "email", também mostra um ícone de triângulo de alerta à direita.

InputWrapper

Wrapper de layout para o input e os elementos relacionados (label e texto de ajuda).

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais aplicadas ao wrapper.

InputField

Wrapper relativo para InputLabel + Input. Use ao combinar um label flutuante com InputText, para o label continuar centralizado na vertical.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais aplicadas ao container do campo.

InputLabel

Label flutuante (como o SelectLabel do Select). Use dentro de InputWrapper; com InputText, envolva o label e o input em InputField. Use um placeholder com o mesmo texto do label (ex.: placeholder="E-mail").

Propriedade	Tipo	Padrão	Descrição
htmlFor	string	-	Associa o label ao id do input.

InputText

Texto de ajuda ou de validação abaixo do input. Aceita os atributos HTML padrão de um span (ex.: className).

Propriedade	Tipo	Padrão	Descrição
invalid	boolean	false	Quando true, usa as cores de erro no texto.
className	string	-	Classes CSS adicionais.

InputPassword

Campo de senha usado pelo Input com type="password". Sempre mostra o ícone de cadeado (Lock) à esquerda e o botão de mostrar/ocultar senha à direita; não aceita iconLeft nem iconRight. Aceita as demais props nativas de input, exceto type.

Propriedade	Tipo	Padrão	Descrição
size	"md" | "lg"	"lg"	Altura do input e tamanho dos ícones.
invalid	boolean	false	Quando true, ativa o estilo de estado de erro.
showPasswordLabel	string	"Mostrar senha"	Label acessível do botão de visibilidade quando a senha está oculta.
hidePasswordLabel	string	"Ocultar senha"	Label acessível do botão de visibilidade quando a senha está visível.
disabled	boolean	false	Desabilita o input e o botão de visibilidade.
className	string	-	Classes CSS adicionais aplicadas ao input.

InputNumeric

Campo numérico usado pelo Input com type="numeric". Aceita só números, um ponto como separador decimal e o sinal de menos quando min é negativo. Outros caracteres, inclusive a vírgula, são removidos: digitar 1,5 vira 15. Tem role="spinbutton" e mostra os botões de aumentar e diminuir à direita. Aceita as demais props nativas de input, exceto type.

Propriedade	Tipo	Padrão	Descrição
size	"md" | "lg"	"lg"	Altura do input e tamanho dos ícones.
invalid	boolean	false	Quando true, ativa o estilo de estado de erro.
iconLeft	React.ReactElement	-	Ícone ou elemento no início do input. Não há slot à direita, que é ocupado pelos steppers.
value / defaultValue	string | number	-	Valor no modo controlado ou valor inicial no modo não controlado.
onChange	(e: ChangeEvent<HTMLInputElement>) => void	-	Função chamada quando o valor muda, pela digitação, pelos steppers ou pelas setas do teclado. Nos steppers e nas setas, recebe um evento sintético com o novo valor em e.target.value.
min	number	-	Valor mínimo. Com o campo vazio, os steppers e as setas vão para min quando ele é maior que zero.
max	number	-	Valor máximo. Os steppers e as setas param nesse limite.
step	number	1	Incremento aplicado pelos steppers e pelas teclas ArrowUp/ArrowDown.
readOnly	boolean	false	Desabilita os steppers e as setas do teclado.
disabled	boolean	false	Desabilita o input e os steppers.
className	string	-	Classes CSS adicionais aplicadas ao input.

InputAdornment

Container (div) que posiciona um input com InputStartIcon e/ou InputEndIcon, ajustando o espaçamento interno do input para os ícones. Use quando montar o campo manualmente. Aceita todas as props nativas de div.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais aplicadas ao container.

InputStartIcon

Slot (span) do ícone no início do input, dentro de um InputAdornment. Não recebe cliques (pointer-events: none). Aceita todas as props nativas de span.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais aplicadas ao slot.

InputEndIcon

Slot (span) do ícone ou ação no fim do input, dentro de um InputAdornment. Diferente do InputStartIcon, recebe cliques, então pode conter um botão. Aceita todas as props nativas de span.

Propriedade	Tipo	Padrão	Descrição
className	string	-	Classes CSS adicionais aplicadas ao slot.