Pular para o conteúdo principal

Text Input​

Componente Text Input

📘 Modo de Uso​

O componente Text Input foi construído como base para outros campos de entrada do sistema.
Ele fornece a estrutura fundamental de input de texto, mas não deve ser utilizado isoladamente.

Atualmente, os seguintes componentes foram derivados dele:

  • Text Field → para textos curtos (até uma linha).
  • Text Area → para textos longos ou múltiplas linhas.
  • Number Field → para entradas exclusivamente numéricas, com controles incrementais.
  • Search Field → para buscas rápidas e consultas.

🧩 Anatomia​

Anatomia do Componente Text Input

📋 Propriedades​

Propriedades do Componente Text Input

⌨️ Código​

opl.input.component.textInput

🎨 Variantes​

Estados​

Variante de estados do Text Input

Tamanhos​

Variante de tamanho do Text Input

Semânticas​

Variante de semântica do Text Input

📃 Observações​

  • O Helper Text pode ser associado ao campo para transmitir orientações adicionais sobre a entrada esperada.
  • Esse texto auxiliar deve ocupar apenas uma linha.
  • Quando a entrada não for aceita, deve ser exibida uma mensagem de erro clara, substituindo o texto auxiliar até que o problema seja corrigido.
  • As mensagens podem assumir status de Warning, Critical ou Success, dependendo da validação.

🛡️ Boas Práticas e Acessibilidade​

  • Sempre utilize labels claras e concisas. (WCAG 2.1: 1.3.1 Informações e Relações)
  • Prefira usar Helper Text para instruções em vez de placeholder. (WCAG 2.1: 3.3.2 Rótulos ou Instruções)
  • Garanta que mensagens de erro orientem como corrigir o problema. (WCAG 2.1: 3.3.3 Sugestão de Erro)
  • Informe de forma acessível requisitos de formatação (ex.: número mínimo de caracteres, formato de e-mail, etc.).