Skip to Content
ComponentsAtomsTextarea

Textarea

Atom

Textarea coleta texto livre longo. Use quando a pessoa precisa registrar contexto, justificativa ou observação auditável.

Textarea deve favorecer clareza e revisão. Para dados curtos, identificadores, busca ou valores estruturados, use Input. Para decisões de crise, o texto auxiliar deve explicar formato, consequência ou limite esperado.

Exemplos copiáveis

React

import * as React from "react"
 
type PulsoTextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
  label: string
  description?: string
  error?: string
}
 
export function PulsoTextarea({
  id,
  label,
  description,
  error,
  className,
  ...props
}: PulsoTextareaProps) {
  const reactId = React.useId()
  const textareaId = id ?? reactId
  const descriptionId = description ? `${textareaId}-description` : undefined
  const errorId = error ? `${textareaId}-error` : undefined
 
  return (
    <div className="grid gap-1.5">
      <label
        htmlFor={textareaId}
        className="font-mono text-[10.5px] uppercase tracking-[var(--tracking-kicker)] text-[var(--fg-subtle)]"
      >
        {label}
      </label>
 
      <textarea
        id={textareaId}
        aria-describedby={[descriptionId, errorId].filter(Boolean).join(" ") || undefined}
        aria-invalid={error ? true : undefined}
        className={[
          "min-h-28 resize-y rounded-[var(--radius-md)] border bg-[var(--card)] px-3 py-2 text-sm leading-6 text-[var(--fg)]",
          "border-[var(--border-strong)] outline-none transition-colors duration-[var(--motion-duration-fast)] ease-[var(--motion-easing)]",
          "placeholder:text-[var(--fg-subtle)] focus-visible:border-[var(--primary)] focus-visible:ring-[var(--ring-width)] focus-visible:ring-[var(--ring)]",
          "disabled:cursor-not-allowed disabled:text-[var(--fg-disabled)] disabled:opacity-60",
          error ? "border-[var(--destructive)]" : "",
          className,
        ].filter(Boolean).join(" ")}
        {...props}
      />
 
      {description ? (
        <p id={descriptionId} className="text-xs text-[var(--fg-muted)]">
          {description}
        </p>
      ) : null}
 
      {error ? (
        <p id={errorId} className="text-xs text-[var(--destructive)]">
          {error}
        </p>
      ) : null}
    </div>
  )
}
<PulsoTextarea
  label="Resumo operacional"
  placeholder="Descreva sinal, fonte e consequência observada."
  description="Registre apenas fatos verificáveis; hipóteses devem ser marcadas como tal."
/>

Quando usar

  • Resumo operacional, observação ou justificativa.
  • Registro de evidência textual.
  • Comentário com contexto que precisa ser auditável.
  • Campo com conteúdo de mais de uma linha.

Quando não usar

  • Para busca ou identificador curto; use Input.
  • Para listas estruturadas; use tabela, chips ou seleção apropriada.
  • Para decisão sem revisão; use controles explícitos.
  • Para esconder instruções longas dentro de placeholder.

Acessibilidade

  • Label visível é obrigatório.
  • Placeholder não substitui label nem instrução.
  • Use aria-describedby para instrução, limite ou erro.
  • Erro precisa explicar correção, não apenas indicar falha.

Regras

  1. Texto livre deve ter expectativa clara.
  2. Descrição deve orientar qualidade do registro.
  3. Use altura inicial suficiente para revisar o conteúdo.
  4. Não use Textarea para dados que precisam ser normalizados.
  5. Em contexto de IA, diferencie fato verificado, hipótese e sugestão.
Last updated on
SwitchToggle