Textfield
Resumo
Campo de input que permite aos usuários inserir informações em uma UI. Muito usado em fluxos de login; datas; entrada de dados; busca; etc
Anatomia
Container: O espaço físico que delimita onde o texto será inserido.
Label Identifica o que deve ser digitado.
Placeholder: Texto temporário que indica o tipo de informação esperada
Leading Icon: Ícone à esquerda, usado para indicar a intenção do campo
Trailing Icon: Ícone à direita, geralmente usado para ações
Supporting Text: Fornece instruções específicas, como requisitos de caracteres para senhas, ou exibe mensagens de erro.
Input Text e Carrot (Caret): O texto digitado pelo usuário e a barra pulsante que indica a posição atual da digitação.
Estados
Para uma boa experiência do usuário (UX), o campo de texto deve reagir visualmente às interações. Os principais estados são:
Default (Padrão): O estado inicial e inativo do campo.
Hover: Quando o usuário passa o mouse sobre o campo, geralmente indicado por uma mudança na cor da borda.
Focus (Ativo): Quando o campo está pronto para receber digitação. É vital que este estado seja visualmente distinto (com bordas coloridas ou sombras) para auxiliar na acessibilidade, especialmente para quem navega via teclado.
Disabled (Desativado): O campo fica acinzentado e não permite interação, geralmente por alguma condição não atendida.
Error (Erro): Indicado geralmente pela cor vermelha e, idealmente, acompanhado de um ícone, garantindo que pessoas com deficiências visuais (como daltonismo) identifiquem o problema.
Variações
Os campos de texto podem variar conforme a necessidade do sistema:
Prefixos e Sufixos: Informações fixas que não mudam (ex: “R$” ou “.com”).
Máscaras de Senha: Ocultam os caracteres digitados por segurança.
Text Area: Campos expansíveis para textos longos.
Tags/Tokens: Quando o sistema transforma uma entrada (como um e-mail) em um bloco visual após o “Enter”.
Botões: Enviar mensagens ou outras ações
Dropdown: Misturar o textfield com dropdown
Acessibilidade
A
O campo precisa de um rótulo visível que identifique o que se digita (WCAG 3.3.2).
Quando o valor digitado é rejeitado, o erro é identificado e descrito em texto, junto ao campo que falhou (WCAG 3.3.1).
Nenhum estado do campo — erro, foco, obrigatório — é comunicado só por cor (WCAG 1.4.1).
Os ícones do campo (leading e trailing) precisam de nome textual equivalente (WCAG 1.1.1).
A referência ao campo não pode depender só de característica sensorial — posição ou cor (WCAG 1.3.3).
Digitar ou mudar o valor não pode disparar uma mudança de contexto inesperada sem aviso prévio (WCAG 3.2.2).
AA
O texto digitado, o rótulo, o placeholder e o texto de apoio precisam de contraste de pelo menos 4.5:1 contra o fundo (WCAG 1.4.3).
A borda do campo, o indicador de foco, a borda do estado de erro e os ícones precisam de pelo menos 3:1 contra a cor adjacente (WCAG 1.4.11).
O campo e os ícones de ação (trailing) precisam de área de toque de no mínimo 24×24px (WCAG 2.5.8).
O indicador de foco precisa estar visível quando o campo é alcançado por teclado (WCAG 2.4.7).
Ao receber foco, o campo não pode ficar totalmente escondido atrás de outro elemento (WCAG 2.4.11).
Quando a correção do erro é conhecida, ela deve ser sugerida ao usuário (WCAG 3.3.3).
AAA
O texto do campo com contraste de 7:1 contra o fundo (WCAG 1.4.6).
O campo e os ícones de ação com área de toque de no mínimo 44×44px (WCAG 2.5.5).
O indicador de foco com espessura equivalente a um perímetro de 2px ao redor do campo e contraste de 3:1 entre focado e não-focado (WCAG 2.4.13).
Ajuda contextual está disponível para o campo — exemplo de preenchimento, link de ajuda, ou explicação do porquê do dado (WCAG 3.3.5).
Boas práticas
Forneça um espaço reservado
Quando o campo de entrada estiver vazio, mostre um valor de exemplo com um exemplo relevante. Isso ajuda a incen
Use uma label de dica para esclarecer.
Na maioria dos casos, um label superior é suficiente para o usuário entender a finalidade da entrada. No entanto, labels inferiores de dica podem ser usados para abordar dúvidas que os usuários possam ter ou fornecer contexto adicional.
Validar entrada
Ao validar a entrada de dados, esteja atento ao momento em que o usuário terminar de interagir com o campo antes de exibir uma mensagem de erro.
Para entradas complexas, como novas senhas, a validação instantânea em linha reduzirá a quantidade de erros.
Já para entradas mais simples, como e-mails, onde os dados esperados são mais óbvios, evite mostrar o erro até que o usuário termine de digitar.
Indique os campos obrigatórios
Um padrão comum para indicar campos obrigatórios seria usar o asterisco (*). No entanto, se a maioria dos campos do formulário for obrigatória, marcar os demais como opcionais pode tornar o visual menos poluído.
Outras Variações
