Pular para o conteúdo principal

Text Area​

Componente Text Area

📘 Modo de Uso​

cuidado

Atenção: O componente Text Area é uma variação do componente TextInput

O componente TextInput foi criado como base para os componentes de input que possuem um uso específico.

O componente Text Area é usado quando é necessário permitir que o usuário insira uma quantidade de texto maior que uma única linha.

Ele apresenta funções como:

  • Resize do campo para permitir redimensionamento conforme a necessidade.
  • Integração com o componente Helper Text, que emite orientações ou alertas sobre os dados inseridos.
  • Definição de limite de caracteres, garantindo maior controle sobre o conteúdo.

🧩 Anatomia​

Anatomia do componente Text Area

📋 Propriedades​

Propriedades do componente Text Area

⌨️ Código​

opl.input.component.textArea

🎨 Variantes​

Estados​

Variações de estado do componente Text Area

Tamanhos​

Variações de tamanho do componente Text Area

Semântica​

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

📃 Observações​

  • O Helper Text transmite orientações adicionais sobre o campo de entrada e como ele deve ser usado.
  • Esse texto deve ocupar apenas uma linha.
  • Quando a entrada não for aceita, uma mensagem de erro deve substituir o texto auxiliar, exibindo instruções claras de correção.
  • As mensagens de ajuda podem assumir os estados: Warning, Critical ou Success.

🛡️ Boas Práticas e Acessibilidade​

  • Use labels claras, concisas e exclusivas. (WCAG 2.1: 1.3.1 Informações e Relações)
  • Prefira Helper Text em vez de placeholders para instruções. (WCAG 2.1: 3.3.2 Rótulos ou Instruções)
  • Certifique-se de que mensagens de erro forneçam instruções objetivas para correção. (WCAG 2.1: 3.3.3 Sugestão de Erro)
  • Indique requisitos de formatação (ex.: limite de caracteres, campos obrigatórios) de forma acessível e antecipada.