components

Textarea

Use a textarea when the user genuinely needs more than one line. Resize is vertical-only — horizontal resize is almost never useful in a web form.

Read the full spec

Default

Two lines visible at base font size, `resize-y` for comfort.

Incident notes

tsx

import { Textarea } from "@wolf/design-system";

<Textarea placeholder="Add context for the dispatcher…" />

Content-fit (auto-grow)

Add `field-sizing-content` plus a min/max height and the field grows with the content. Falls back gracefully to the min height on older browsers.

Auto-grow

tsx

<Textarea
  className="field-sizing-content min-h-[80px] max-h-[240px]"
  placeholder="Type a multi-line note…"
/>

States

Disabled, read-only and invalid each render the standard state. Error uses `aria-invalid` on the element — never a hard-coded red border.

Frozen copy — read-only for audit trail.

tsx

<Textarea placeholder="Disabled" disabled />
<Textarea defaultValue="Frozen copy." readOnly />
<Textarea aria-invalid defaultValue="Missing context." />

With help text

Pair the textarea with a small help line when the expected content isn't obvious from the label alone.

Notes for dispatcher

Keep it under 500 characters. Plain English works best.

tsx

<Label htmlFor="notes">Notes for dispatcher</Label>
<Textarea id="notes" rows={4} />
<p className="text-xs text-muted-foreground">
  Keep it under 500 characters. Plain English works best.
</p>