Textarea

Formularioserver safe

Campo de texto multi-linha, com número de linhas configurável e tons de validação.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Textarea } from "@trdr/ui/textarea"

Uso

import { Textarea } from "@trdr/ui/textarea"

export function Exemplo() {
  return <Textarea />
}

Variantes

GrupoValoresPadrão
tone
defaulterrorwarningsuccess
default

Props

TextareaPropsestende React.TextareaHTMLAttributes<HTMLTextAreaElement>, VariantProps<typeof textareaVariants>

Textarea

Campo de texto de múltiplas linhas. É o primitivo que substitui a variante multi-line do antigo TextInput do Hub, agora como componente próprio em vez de uma variante de um componente maior.

Quando usar

  • Observações, comentários, descrições, qualquer texto livre de mais de uma linha.
  • Sempre acompanhado de um label associado por htmlFor/id.

Quando não usar

  • Campo de uma linha: use input, que também tem ícone à esquerda e botão de limpar, recursos que o textarea não tem porque não fazem sentido em texto longo.

Anatomia

<textarea data-slot="textarea">   elemento unico, sem wrapper

Diferente do input, o textarea não precisa de wrapper: não tem ícone nem botão de limpar no legado, então o próprio elemento nativo carrega toda a estilização e o ref aponta direto para ele.

Variantes

  • tone: default, error, warning, success. Mesma função do tone do input.
  • Não existe variante de tamanho. O legado não tem uma versão "grande" separada do multi-line, a altura é controlada pela prop nativa rows (padrão 3, igual ao componente antigo).

Acessibilidade

  • Quando tone="error", o componente marca aria-invalid="true" sozinho, com a mesma regra de precedência do input: um aria-invalid explícito do consumidor prevalece.
  • aria-describedby funciona por spread de props nativo, para o componente field (fora de escopo aqui) referenciar a mensagem de erro ou ajuda.
  • resize fica desabilitado (resize-none), replicando o comportamento do legado: o redimensionamento manual não fazia parte do desenho original.

Nota de tipografia

O TextInput legado usava 11px/450 no texto do multi-line, diferente dos 14px/400 do single-line. A nova escala tipográfica do design system não tem um estilo de 11px equivalente (o mais próximo é text-b4, 12px/500, com tracking diferente). Em vez de aproximar com um valor que não bate exato, o textarea usa text-b3 (14px/400), o mesmo do input, unificando a tipografia dos dois campos. Isso é uma lacuna real de design, registrada para quem for revisar o gap na tipografia.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="textarea"]
16 tokens usados
bg-surface-disabledbg-surface-primaryborder-border-disabledborder-border-focusborder-border-strongborder-content-errorborder-content-successborder-content-warningoutline-nonering-offset-2ring-offset-backgroundring-ringtext-b3text-content-disabledtext-content-placeholdertext-content-primary