Input

O Input é o campo de uma linha do Admin: nomes, códigos, e-mails, telefones. Ele é só o controle; rótulo, ajuda e erro vêm do TextField ao redor (veja Label, Description e FieldError). Os campos não têm borda fina: o limite vem do fundo tonalizado e do anel de foco azul. Para texto longo use TextArea; para prefixo ou sufixo, InputGroup.

import { Input, Label, TextField } from "@rastreio-x/ui";

Padrão

Dentro de um TextField com Label. O placeholder dá um exemplo; o rótulo nomeia.

Variantes

primary (padrão) tem sombra suave e serve em fundos de página. secondary não tem sombra e é a variante para campos dentro de cartões e outras superfícies.

Tipos

O type do TextField escolhe o teclado do celular e a validação nativa. Combine com autoComplete e inputMode quando fizer sentido.

Estados

Vazio, preenchido, somente leitura, desabilitado e inválido. Somente leitura permite selecionar e copiar; desabilitado, não.

Largura total

fullWidth no TextField e no Input faz o campo ocupar a coluna inteira. Sem ele, o campo tem a largura que a sua classe definir.

Controlado

Com value e onChange no TextField você guarda e transforma o texto, como normalizar um código para maiúsculas.

Em um cartão do Admin

Dentro de Card, use variant="secondary" no campo para ele contrastar com a superfície sem ganhar sombra.

Anatomia

TextField
├── Label
├── Input
├── Description
└── FieldError

O Input é um elemento único (<input>). Quem agrupa é o TextField, que liga rótulo, descrição e erro por id e aria-describedby.

Propriedades

O Input aceita as propriedades do <input> nativo (placeholder, type, autoComplete, inputMode...). O estado (value, isDisabled, isInvalid, isReadOnly, isRequired) fica no TextField.

Animações

O campo não anima. A cor do fundo e o anel de foco têm uma transição curta de cor do HeroUI; com prefers-reduced-motion, a folha global da fachada a reduz a 0,01 ms. Digitar não dispara nenhum movimento.

Acessibilidade

• O nome acessível vem do Label do TextField; sem rótulo visível, passe aria-label ao Input.
• O anel de foco azul mantém contraste mínimo de 3:1 contra a superfície; o texto do campo segue em 4,5:1. A ausência de borda é um desvio aceito pelo design, mitigado pelo fundo tonalizado.
• Escolha o type certo (email, tel, url) para o teclado do celular e a validação nativa.
• isRequired expõe aria-required; isInvalid expõe aria-invalid, e o FieldError é lido por aria-describedby.
• Não use placeholder como única instrução: ele some ao digitar e tem contraste menor.

Boas práticas

• Prefira somente leitura a desabilitado quando a pessoa precisa copiar o valor.
• Use variant="secondary" dentro de cartões.
• Não force maiúsculas só no CSS: transforme o valor no onChange, como no exemplo controlado.
• Para valores numéricos com passo, use NumberField.

Relacionados

• TextField o contêiner com rótulo, ajuda e erro.
• InputGroup para prefixo e sufixo.
• TextArea para várias linhas.
• NumberField para números.
• SearchField para busca.