Textarea

Textarea is the system's base multi-line field. It keeps the same border, invalid treatment, read-only state, and restrained field styling as the single-line input while giving longer content room to breathe and wrap naturally.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<Textarea placeholder="Write the release note summary." />

Why This Primitive Exists

Not every text field should be compressed into a single line. Use the textarea when the user needs to draft, revise, or review longer content with natural line breaks.

• Use it for notes, descriptions, summaries, and message composition.
• Prefer it over stacked single-line inputs when the text is conceptually one body of content.
• Avoid it for short structured values like URLs, names, slugs, or numeric settings.

Examples

Basic Multi-Line Field

The base field is enough for most note-taking and description surfaces.

Read-Only, Invalid, And Disabled States

The component inherits the same state logic as the rest of the form system so longer text fields do not need local overrides.

<Textarea readOnly defaultValue="Read-only production notes" />
<Textarea aria-invalid defaultValue="Draft summary missing approval." />
<Textarea disabled defaultValue="Publishing window closed." />

In Context

Compose the field with Label, helper copy, and a containing card when the writing task needs more explicit structure.

Guidance

Let The Field Hold One Body Of Copy

• Use one textarea for one coherent piece of writing.
• Split content into separate fields only when each block has its own meaning or validation rule.
• If the input is long enough to need formatting tools, pair the field with adjacent controls instead of embedding them inside the textarea.

Keep Labels And Help Outside The Frame

• Put the label above the field.
• Keep helper text nearby so the user can still focus on the writing area itself.
• Avoid placeholder copy as the only instruction when the field has real editorial or operational requirements.

Preserve Readability

• Give the field enough vertical space for the expected amount of copy.
• Use readOnly when the text should remain selectable.
• Use aria-invalid so visual error treatment and accessibility signals stay aligned.

API Reference

Textarea

Textarea renders a native textarea and accepts the full React.ComponentProps<"textarea"> API.

Built-In Behaviors

The base styles also include a minimum height, stronger focus border, and text selection colors consistent with the rest of the repo's form primitives.