Textarea

Componentes/Entrada e seleção

ImplementaçãoHTML/CSS/JSArk/Zag — planejadaReact · shadcn/Base UIAngular

Componente Angular standalone sobre textarea nativo, com Form Field, contador acessível, validação e ControlValueAccessor.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Preview funcional

Executado pelo componente Angular nativo com HTML textarea + Angular Forms.

Carregando preview funcional…

Abrir playground Angular

Anatomia

Message* 4

Too short

1 2 3

Message must be at least 20 characters. 5

Write a clear message with enough detail. 6

1 Wrapper (.ds-textarea) -- mesmo padrão de borda/radius do Input.
2 Campo (.ds-textarea__field) -- o elemento nativo <textarea>.
3 Alça de redimensionamento -- nativa do navegador, apenas vertical por padrão.
4 Label (.ds-field__label) -- externo, via Form Field.
5 Mensagem de erro (.ds-field__error) -- externa, via Form Field.
6 Texto auxiliar (.ds-field__helper) -- externo, via Form Field.
Contador de caracteres (opcional, .ds-field__counter) -- disponível via wrapper Form Field.

Padrão

Label

Helper text

Tamanhos

Size	Min-height	Caso de uso
Small (--sm)	80px	Entradas curtas: avaliações, comentários breves
Medium (--md)	120px	Uso padrão: mensagens, descrições (default)
Large (--lg)	160px	Conteúdo longo: bios, feedback detalhado

Contador de caracteres

Bio

0 / 200

Estados

No Figma, State representa apenas estados visuais exclusivos: Default, Hover, Focus e Disabled. Filled, Error e Read-only são propriedades separadas; Error combina com Default/Hover/Focus, e Read-only combina com Default/Focus.

Error

Message

Too short

Message must be at least 20 characters. Write a clear message with enough detail.

Disabled

Disabled textarea

Readonly

Read-only content that cannot be edited.

Figma property	Value / CSS trigger	Visual change	Token
State	Default	Neutral surface and border	component.field.bg.default, component.field.border-color.default
State	Hover / :hover	Darker border	component.field.border-color.hover
State	Focus / :focus-within	2px outline ring, component radius	component.field.border-color.focus, component.focus-ring.*, component.textarea.focus-ring.radius.default
State	Disabled / [disabled] or .ds-textarea--disabled	Muted bg, border and content	component.field.bg.disabled, component.field.value.color.disabled
Error	True / .ds-textarea--error or .ds-field--error .ds-textarea	Red border and error focus ring	component.field.border-color.error, component.focus-ring.color.error
Error + State	True + Hover / .ds-textarea--error:hover	Darker red border	component.field.border-color.error-hover
Read-only	True / [readonly] or .ds-textarea--readonly	Readonly bg with neutral focus ring	component.field.bg.readonly, component.focus-ring.color.readonly

Propriedades Figma

Propriedade	Tipo	Padrão	Descrição
Show Label	Boolean	true	Exibe ou oculta o label row (incluindo asterisco de obrigatório)
Label	Text	"Rótulo"	Texto do label (label/md)
Required	Boolean	false	Exibe o asterisco * em feedback/error/content/default ao lado do label
Show Helper Text	Boolean	true	Exibe ou oculta o texto auxiliar abaixo do controle
Helper Text	Text	"Texto auxiliar"	Anotação em caption/sm (content/secondary)

Uso

Quando usar

Use textarea quando

O usuário precisa inserir texto multilinha: mensagens, descrições, comentários, feedback ou bios. Sempre que a entrada esperada seja mais de uma linha.

Não use textarea quando

A entrada é de uma única linha (use Input), ou você precisa de formatação rich text (use um editor rich text -- não faz parte deste DS).

Boas práticas

Feedback

Faça

Defina uma altura inicial razoável (3-4 linhas) que indique o comprimento esperado do conteúdo.

Feedback

Não faça

Um textarea de 1 linha parece idêntico a um input -- confuso para os usuários.

Bio

42 / 200

Faça

Use um contador de caracteres quando houver um limite rígido (tamanho do campo no banco, restrição de API).

Comments

0 / 99999

Não faça

Não adicione um contador de caracteres para campos abertos onde o comprimento não é uma preocupação real.

Diretrizes de conteúdo

Regra	Exemplo
Labels seguem as mesmas regras do Input	"Message", "Description", "Bio" -- not "Enter your message here"
Placeholders podem ser um pouco mais longos (campo mais largo)	"Tell us about your experience..." -- not just "Type here"
Mensagens de erro descrevem o que deu errado e como corrigir	"Message must be at least 20 characters." -- not "Error"
Formato do contador: atual / máximo	"42 / 200" -- not "42 characters" or "158 remaining"
Contador acima do limite usa ds-field__counter--over	Contador fica vermelho quando atual > máximo

Relacionados

Input Select

Quando escolher esta saída

Adote esta saída Angular nativa quando a aplicação já usa Angular. Ela consome o mesmo CSS do DS e não depende do runtime Web nem dos adapters React.

Implementação

Status

Beta

Distribuição

Tarball Angular validado

Instalação

npm

npm install ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

pnpm

pnpm add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

yarn

yarn add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

bun

bun add ./dist/tis-angular-0.0.0-beta.0.tgz ds-tis

Beta de workspace validada

O comando instala o tarball local gerado e validado no consumer. @tis/angular ainda não está publicado no registry público do npm.

Estilos do DS

@import "ds-tis/css";

Importações Angular

import { FormsModule } from '@angular/forms'
import { TisTextarea } from '@tis/angular/textarea'

Template

<tis-textarea
  name="message"
  label="Mensagem"
  [(ngModel)]="message"
  helperText="Máximo de 500 caracteres."
  [maxLength]="500"
  [showCounter]="true"
/>

Contrato público

Pacote

@tis/angular

Entrypoint

@tis/angular/textarea

Primitive

HTML textarea + Angular Forms

Status

Beta

Acessibilidade

Interação por teclado

Tecla	Ação
Tab	Move o foco para dentro / fora do textarea
Enter	Insere uma nova linha (NÃO envia o formulário)
Qualquer caractere	Digita no campo

Diferente de inputs de linha única, pressionar Enter dentro de um textarea cria uma nova linha em vez de enviar o formulário. Este é o comportamento nativo do navegador.

Accessibility

Critério WCAG	Requisito	Status
1.3.1 Info and Relationships (A)	Every textarea must have a visible <label> with matching for/id.	✓
1.3.5 Identify Input Purpose (AA)	Use autocomplete attributes where applicable (e.g. autocomplete="street-address").	✓
1.4.3 Contrast (AA)	Text and placeholder meet 4.5:1 and 3:1 contrast respectively.	✓
2.4.11 Focus Appearance (AA)	Focus ring 2px + 2px gap, contrast ≥ 3:1 against adjacent colors.	✓
3.3.1 Error Identification (A)	Error state uses aria-invalid="true" + aria-describedby linking to the error message.	✓
3.3.2 Labels or Instructions (A)	Placeholder is supplemental, never a replacement for the label.	✓
4.1.3 Status Messages (AA)	Character counter uses aria-live="polite" so screen readers announce updates.	✓

Resumo de atributos ARIA

aria-invalid="true" -- definido quando o campo tem erro de validação.
aria-describedby -- referencia o ID do elemento de mensagem de erro ou texto auxiliar.
aria-live="polite" -- no contador de caracteres para atualizações dinâmicas de leitores de tela.
Se maxlength estiver definido no elemento nativo, navegadores impõem o limite -- sem necessidade de validação JS.

Required e label invisível

Quando Required = true, adicione aria-required="true" no <textarea> — o asterisco visual (.ds-field__required) é decorativo (aria-hidden="true"). Quando Show Label = false, use aria-label no <textarea>. O Helper Text deve ser vinculado via aria-describedby.

Responsabilidade da saída

Preserve a semântica nativa do button, submit, nomes acessíveis, estado disabled e foco visível.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável