Pular para o conte√ļdo principal

Text area

Vis√£o geral#

O Text area é um componente de entrada de dados, permitindo que o usuário insira ou edite linhas de texto. Geralmente é utilizado para coletar dados textuais, como comentários e detalhamentos.

Tipos#

Pensando na modularidade do Design system, o text area possui duas composi√ß√Ķes distintas:

  • Text area: vers√£o padr√£o do componente, com todos os elementos;
  • Text area (Single): apenas o campo de entrada em sua forma m√≠nima.
Dois tipos de text area: padr√£o e unit√°rio.

Anatomia#

Estruturalmente, o text area pode conter label, field, help text e text error. Já o campo em si, possui suas partes específicas, como border e input text.

Text Area#

Demonstrativo das 4 partes do text area completo

1. Label (ani-label)

2. Field (single)

3. Help text - opcional

4. Text error (error)

Text Area (Single)#

Text area na vers√£o single, indicando as 5 partes

1. Placeholder

2. Border

3. Background

4. Input text

5. Outline (focus)

O componente é estruturado e estilizado por meio dos design tokens. Os tokens que podem ser alterados pelas marcas estão listados na seção de propriedades customizáveis.

note

A label √© tratada como um componente √† parte no Design System (ani-label). Voc√™ pode consultar suas varia√ß√Ķes e customiza√ß√Ķes na documenta√ß√£o espec√≠fica desse componente.

ūüĒó Label

Comportamento#

  • O componente pode ser redimensionado atrav√©s da marca√ß√£o no canto inferior direito(resize). Por padr√£o, possui uma altura estabelecida de 3 linhas.
  • Os elementos label, help text e text error acompanham e se limitam √† largura do text area dentro do layout. Caso haja na label o indicativo de obrigatoriedade do campo (required text), esse elemento permanece ao lado do texto da label.

Boas pr√°ticas#

Fazer#

  • O campo de entrada deve ter tamanho grande o suficiente para que a maioria do conte√ļdo inserido fique vis√≠vel (ou permitir que o usu√°rio ajuste o tamanho);
  • Mantenha a label do campo sempre vis√≠vel, para permitir que o usu√°rio identifique corretamente o campo, mesmo ap√≥s conte√ļdo inserido;
  • Use label com textos autoexplicativos, com instru√ß√Ķes claras e objetivas, para que o usu√°rio identifique com facilidade qual informa√ß√£o precisa ser inserida

N√£o Fazer#

  • Nunca use o placeholder para substituir a label do componente. Use o placeholder para trazer mais contexto sobre o tipo de informa√ß√£o que precisa ser adicionada.

Acessibilidade tratada no componente#

Algumas diretrizes de acessibilidade j√° s√£o tratadas no componente, internamente, e n√£o podem ser alteradas. S√£o elas: