Forms

Textarea

Textarea is a multi-line native textarea for longer free-text content, composed with FormField for label and validation.

State × Size — 15 variants

betaReact AvailableFigma AvailableDocs Partial

React last updated: 2026-07-13
Documentation last updated: 2026-06-01
Accessibility target: WCAG 2.2 AA (target)
Version: 0.2.0-beta

Known open questions

Minimum height uses temporary tokens — Figma has no numeric height property.
Vertical resize enabled as temporary default pending Figma confirmation.

Live preview

Multi-line native textarea composed with FormField for label, helper, and validation relationships.

Default

Description

Markdown is not supported.

Sizes

Small / Medium / Large

Small

Medium

Large

States

Error / Disabled / Read-only

Bio

Bio must be at least 20 characters.

Internal notes

Published copy

This content is read-only but remains focusable.

Purpose

Multi-line free-text entry for longer content (descriptions, comments, messages).

Anatomy

Textarea = native textarea with shared field border/radius tokens. FormField supplies label and validation.

Variants and states

default · error · disabled · read-only

When to use

Any field expecting more than one line of input.

When not to use

Single-line fields — use Text Input.

Accessibility

Same labelling requirements as Text Input. Text wraps and top-aligns rather than vertically centering.

Keyboard behavior

Native textarea keyboard behavior. Tab moves focus in and out.

Common mistakes

Using a fixed height too small for realistic content.

Properties

State × Size as variants. Value (text).

When should I use Textarea instead of Text Input?

Use Textarea when users need multiple lines — descriptions, comments, or messages. Text Input is for single-line values.

Tokens used

component/radius/controlsemantic/border/defaultsemantic/focus-ringsemantic/surface/default

Known limitation

No numeric properties exist for height — real usage may need per-instance manual height adjustment.

Component API

Prop	Type	Default	Description
label	string	—	Visible field label via FormField.
rows	number	4	Initial visible row count.
size	"sm" \| "md" \| "lg"	"md"	Control sizing token set.
readOnly	boolean	—	Focusable but not editable.
error	string	—	Validation message rendered through FormField.

React example

Copy React example

import { Textarea } from "@/components/ui/Textarea";

export function Example() {
  return (
    <Textarea
      label="Description"
      placeholder="Tell us about your project…"
      supportingText="Plain text only."
      rows={4}
    />
  );
}