Inputs

Em produção

Formulários são conversas. Inputs são onde o usuário fala com o sistema. Clareza e prevenção de erros são vitais.

Anatomia

Um campo de entrada robusto é composto por quatro elementos principais que trabalham juntos:

Label: Diz o que é o campo. Deve estar sempre visível (placeholders não substituem labels).
Container: A área clicável onde o dado é inserido.
Placeholder: Dica ou exemplo de formato (ex: `nome@exemplo.com`). Desaparece ao digitar.
Feedback/Helper: Texto de ajuda ou mensagem de erro situada, geralmente, abaixo do campo.

Validação e Feedback

A validação deve ser progressiva e útil. O objetivo não é apontar erros, é ajudar o usuário a ter sucesso.

Boas Práticas

Validar ao sair do campo (onBlur), não enquanto digita (exceto senhas).
Mensagens de erro explícitas ("Email inválido" vs "Erro").
Preservar o dado preenchido se houver erro.

A Evitar

Validar apenas ao enviar o formulário.
Usar apenas cor (vermelho) para indicar erro.
Esconder labels e confiar apenas no placeholder.

Acessibilidade em Formulários

Todo input precisa de um `label` programaticamente associado (via `for/htmlFor` e `id`).
Mensagens de erro devem estar conectadas ao input via `aria-describedby` e `aria-errormessage`.
Campos obrigatórios devem ser indicados visualmente e via código (`required` ou `aria-required`).

Placeholder vs. Label

Nunca use placeholder como label. Placeholders têm baixo contraste, desaparecem quando o usuário digita (forçando o uso da memória de curto prazo) e não são lidos consistentemente por tecnologias assistivas.