Pular para o conteúdo principal

Text Field​

Componente Text Field

📘 Modo de Uso​

cuidado

Atenção: O componente Text Field é uma variação do componente Text Input.
Ele foi criado para situações em que o campo de entrada deve ser usado especificamente para textos curtos.

O componente Text Field é usado quando é necessário permitir que os usuários insiram uma pequena quantidade de texto (normalmente até uma linha).

Ele funciona em conjunto com o componente Helper Text, que pode fornecer instruções adicionais ou mensagens de erro. Além disso, pode ser configurado com limites de caracteres, ajudando a guiar a entrada do usuário.

Quando usar:

  • Para nomes, e-mails, senhas, títulos ou entradas curtas de texto.
  • Em formulários simples ou etapas de login.

Quando não usar:

  • Para textos longos ou descrições, prefira o Text Area.

🧩 Anatomia​

Anatomia do componente Text Field

📋 Propriedades​

Propriedades do componente Text Field

⌨️ Código​

opl.input.component.textField

🎨 Variantes​

Estados​

Variações de estado do componente Text Field

Tamanho​

Variações de tamanho do componente Text Field

Semântica​

Variações de semântica do componente Text Field

📃 Observações​

  • O Helper Text transmite instruções adicionais ou mensagens de erro relacionadas ao campo.
  • As mensagens de erro devem substituir o texto auxiliar até que o problema seja corrigido.
  • Pode incluir um contador de caracteres quando houver limite definido para o campo.

🛡️ Boas Práticas e Acessibilidade​

  • Use labels claras e concisas. WCAG 2.1: 1.3.1 Informações e Relações.
  • Prefira usar Helper Text em vez de placeholder para instruções. WCAG 2.1: 3.3.2 Rótulos ou Instruções.
  • Garanta que mensagens de erro forneçam orientações claras para correção. WCAG 2.1: 3.3.3 Sugestão de Erro.
  • Informe de forma acessível limites de caracteres ou formatos obrigatórios.