Área de Texto (Text Area)

O componente Text Area no Acronos Design System é utilizado para entrada de textos com mais de uma linha. Ele é versátil e pode ser adaptado a diferentes contextos e necessidades de edição, possuindo variações simples e ricas em funcionalidades.

Variações

Text Area Simples

• Um campo de texto básico para entrada de múltiplas linhas.

• Ideal para inputs de texto mais longos, como mensagens ou descrições.

Text Area com Editor de Texto Rico

• Inclui ferramentas avançadas de formatação, como:

  • Negrito, itálico, sublinhado.

  • Escolha de fontes e tamanhos.

  • Alinhamento de texto.

  • Listas numeradas e marcadores.

  • Inclusão de links, emojis e tabelas.

• Indicado para cenários que exigem personalização ou formatação detalhada, como editor de artigos ou campos para comentários enriquecidos.

Estilos e Espaçamentos

Tipografia

• Texto inserido segue a fonte padrão definida no design system.

• Suporte para personalização de fonte no editor de texto rico.

Cores

• Bordas:

  • Cor padrão com feedback visual ao receber foco.

• Fundo:

  • Fundo branco ou personalizado de acordo com o tema.

Espaçamento

• Interno: Garantido através de padding uniforme para melhorar a legibilidade.

• Externo: Margens ajustáveis conforme a posição no layout.

Acessibilidade

Navegação por Teclado

• Suporte completo para navegação e edição utilizando apenas o teclado.

Leitores de Tela

• Labels claros para identificar o propósito do campo.

• Feedback de erros e validações audíveis para tecnologias assistivas.

Validações e Estados de Erro

• Exibe mensagens claras em caso de validação inválida, como:

  • Campo obrigatório.

  • Limite de caracteres excedido.

Exemplos de Uso

Simples

• Comentários gerais.

• Descrição de produtos ou projetos.

Rico em Formatação

• Edição de relatórios ou publicações.

• Campos que exigem textos com estrutura e personalização.