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.

import { Card, CardContent, CardDescription, CardEyebrow, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

<Card variant="form" className="max-w-xl">
  <CardHeader>
    <CardEyebrow>Long-form field</CardEyebrow>
    <CardTitle measure="record">Use a textarea when the user needs room to compose, revise, and review.</CardTitle>
    <CardDescription>
      Keep labels and helper copy outside the field so the text area stays focused on the content itself.
    </CardDescription>
  </CardHeader>
  <CardContent className="grid gap-3">
    <div className="grid gap-2">
      <Label htmlFor="docs-textarea-context">Editorial summary</Label>
      <Textarea
        id="docs-textarea-context"
        defaultValue="The revised product card keeps pricing, state labels, and the primary action in one resolved frame."
        className="min-h-36"
      />
    </div>
    <p className="text-sm leading-6 text-muted-foreground">
      This is a better fit than stacking several single-line inputs when the writing needs natural line breaks.
    </p>
  </CardContent>
</Card>

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.