Pular para o conteúdo
Faculdade PhorteDesign System

Textarea

Em andamento

Campo de texto de várias linhas — mensagem, justificativa, observação —, sobre o mesmo contrato visual do Input e do Select: borda de controle, foco em 2px e o vermelho só no erro.

Função
Formulário e ação
Também chamado de
área de texto, campo de mensagem, caixa de texto grande, textarea
Mora em
app/components/atoms/Textarea.tsx
Última mudança
2026-09-29
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

Na largura da página: 0px

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão
  2. No formulário
  3. Com contador
  4. Com mínimo
  5. Com mínimo e máximo
  6. Acima do limite
  7. Com proteção contra spam
  8. Com erro
  9. Desabilitado
  10. Somente leitura

Quando usar

Para resposta que pode passar de uma linha: a mensagem do "Fale conosco", a justificativa de um pedido de bolsa, uma observação.

Faça

  • Use dentro de um FormField: o rótulo, a dica, o contador e o erro vêm dele.
  • Dê rows pelo tamanho que se espera da resposta (quatro por padrão).
  • Deixe a pessoa esticar na vertical (redimensionar="vertical", o padrão).
  • Peça um tamanho com o contador do FormField (E152): { maximo: 280 }, { minimo: 50 } ou os dois. Sem atual, ele conta sozinho. Valide no envio com erroDeTamanho (app/lib/contagem-de-caracteres.ts), que diz o mesmo número.
  • Num formulário aberto ao público, ligue a proteção contra spam no formulário (E153): useProtecaoContraSpam dá o campo-isca e o tempo mínimo, e os sinais vão com o envio para o serviço decidir. Nada para a pessoa resolver.

Evite

  • Usar o placeholder como instrução: ele some ao digitar. A instrução vai na dica do FormField.
  • Limitar com maxLength: o texto colado é cortado sem aviso. Use o contador com maximo — o texto continua entrando, o contador diz quanto passou e o envio recusa.
  • Mostrar o mínimo como erro enquanto a pessoa digita: abaixo do mínimo o contador informa, em cinza; o erro é do envio.
  • Proteger com CAPTCHA, teste de lógica ou bloqueio de colar: é barreira cognitiva (SC 3.3.8), e quem paga é a pessoa, não o robô.
  • Redimensionar na horizontal: quebra o layout — o componente não oferece.

Quando não usar. Para dado de uma linha (nome, e-mail, CPF), use o Input. Para escolher entre opções conhecidas, o Select ou o Radio.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Caixa — Borda `--border-interactive`, cantos do campo (`rounded-campo`), `px-4 py-3`, entrelinha folgada.
  2. Alça — A do navegador, no canto de baixo, só na vertical.

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
PadrãoBorda de controle de 1px.
FocoBorda --border-focus de 2px (sombra interna), só no teclado e no clique — pelo CSS, como o Select.
Erroerror ou aria-invalid do FormField: borda --destructive, e aria-invalid="true".
DesabilitadoA 50%, cursor proibido, fora do Tab.
Somente leituraBorda tracejada e fundo --muted; continua no Tab e copiável.
Com contadorEmbaixo do campo, pelo FormField: "N de 280 caracteres" (máximo), "faltam N para o mínimo de 50" (mínimo), ou os dois (E152).
Abaixo do mínimoO contador em cinza, dizendo quanto falta. Não é erro: o campo não fica vermelho.
Acima do limiteO contador em vermelho, com o ícone e "N caracteres acima do limite". O texto continua entrando.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
EnterQuebra a linha — não envia o formulário. Conferido no teste da ficha.
Digitando com contadorO contador muda a cada tecla; quem usa leitor de tela ouve quanto falta ou sobra 1s depois de parar de digitar, e não a cada tecla (padrão do GOV.UK). Conferido no teste da ficha.
Dentro do FormFieldRecebe id, aria-describedby (dica, contador, erro) e aria-invalid do campo, sem repetir nada.

Relacionados