Textarea

Multi-line text. React <Textarea> (packages/ui/src/components/Textarea.tsx) wraps the native <textarea> with .acrm-textarea (apps/web/src/ds.css) — the Input box with vertical padding, a 72px minimum and vertical resize. It exists so nobody puts .acrm-input (a 32px box) on a textarea.

When to use

  • Text longer than one line: description, note, message body, internal comment.
  • Anything the user may want to resize while writing.

When not to use

  • A single value on one line — Input.
  • Text with @ references to records (task text, note composer) — Mention input.
  • Rich text with headings and lists (notes) — the note editor is its own composition, not this field.
  • <textarea className="acrm-input"> — blocked by pnpm ds:validate:usage (textarea-single-line-class, HARD).

Anatomy

  • Box: min-height: 72px, padding: var(--sp-2) var(--sp-3), border: 1px solid var(--border-strong), border-radius: var(--radius-sm), background: var(--surface-100) (--surface-50 in dark), color: var(--fg), font: var(--p), width: 100%, resize: vertical.
  • Height is driven by the native rows (3 ≈ minimum, 6 for a long note); the user can drag it taller, never wider.
  • Placeholder --fg-muted; focus = accent border + 3px 16% accent ring, same as Input.
  • No DS rule for :disabled or .is-error — a disabled textarea shows the browser's default look; an error is carried by <Field error> only.

Best practices

Do

  • Set rows to the expected length (3 for a short note, 6 for a description) — the box should not look bigger than the content it expects.
  • Let it fill the column; long text is the one case where full width is right.
  • Put it in <Field label hint> like any other control.

Don't

  • Fixing the height with inline style or turning off resize — the user decides how tall it is.
  • Using it for one-line values because "there might be more" — that is a wider Input.
  • A page-level .xyz-textarea clone with its own padding or radius.

Content

  • Label is a noun ("Note", "Description"); the hint says who sees the text or a limit ("Visible to the whole team").
  • Placeholder is a short prompt ("Add a note…"), not an example paragraph.
  • Never pre-fill with instructions the user has to delete.
  • input — one line.
  • field — label, hint and error.
  • mention-input — text with @ references.
  • Stories: components--textarea--default, components--textarea--sizes, components--textarea--states, components--textarea--composition; legacy components--inputs--textarea.

Source: docs/text-field/textarea.usage.md · GitLab