TextArea

O TextArea recebe texto longo: a mensagem de um e-mail ao Cliente, a observação de um Pedido, a descrição da loja. Como o Input, ele é só o controle e vive dentro de um TextField. Use rows para definir a altura inicial; o campo continua redimensionável pelo conteúdo do navegador.

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

Padrão

TextField, Label e TextArea com rows. Mostre no placeholder um exemplo real de texto.

Variantes

primary (padrão) tem sombra suave; secondary não tem, e é a variante para campos dentro de cartões.

Contador de caracteres

Quando há limite, diga quantos caracteres restam na Description e marque o campo como inválido ao passar. A região aria-live="polite" anuncia a contagem sem interromper a digitação.

Estados

Somente leitura permite selecionar e copiar; desabilitado, não.

Largura total

fullWidth no TextField e no TextArea ocupa a coluna inteira, útil em formulários de uma coluna.

Em um cartão do Admin

A mensagem do e-mail ao Cliente dentro de um Card, com variant="secondary" e uma ação no rodapé.

Anatomia

TextField
├── Label
├── TextArea
├── Description
└── FieldError

O TextArea é um único elemento <textarea>. Para um grupo com prefixo ou sufixo em várias linhas, use InputGroup.TextArea.

Propriedades

O TextArea aceita as propriedades do <textarea> (rows, placeholder, maxLength...). Estado e validação ficam no TextField.

Animações

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

Acessibilidade

• O Label do TextField é o nome acessível; sem rótulo visível, passe aria-label.
• Description e FieldError entram em aria-describedby.
• Em contadores, use uma região aria-live="polite" e anuncie a contagem de forma esparsa, não a cada tecla.
• Enter insere uma quebra de linha; não use Enter para enviar. O envio fica num botão.
• O anel de foco mantém 3:1 contra a superfície; o texto, 4,5:1.

Boas práticas

• Use rows entre 3 e 6; mais que isso força rolagem de página.
• Se existe limite, mostre-o antes da pessoa chegar nele.
• Use variant="secondary" dentro de cartões.
• Texto de uma linha pertence ao Input.

Relacionados

• TextField o contêiner com rótulo, ajuda e erro.
• Input para uma linha.
• InputGroup para prefixo e sufixo.
• Label, Description e FieldError os textos de apoio do campo.