Components

Textarea

Multi-line text input matching Input's border and focus styles. Resizes vertically only. Minimum height 64px (min-h-16).

Updated Jul 10, 2026 by Leonardo Posada

Variants

<div className="flex flex-col gap-2">
  <Label htmlFor="notes">Rule summary</Label>
  <Textarea
    id="notes"
    placeholder="Block payments from country XX when amount > 500 USD…"
    rows={4}
  />
</div>

When to use

  • Free-form text (rule summary, notes, description).
  • JSON snippets or code that isn't syntax-highlighted.

When not to use

  • For a single-line query — use Input.
  • For code with syntax — use a code editor primitive (not in the kit yet).

Usage

Do
  • Pair with a Label describing the expected content.
  • Set a rows or min-h that matches the average length users will type.
Don't
  • Don't disable resize — vertical resize is expected.
  • Don't add drop shadow — flat border only, same as Input.