caliper uidocs
DemoSign inGet Pro

Textarea

Free

A recessed multi-line field that grows with the draft from 3 to 8 lines.

Installs components/ui/textarea.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/textarea.json

Plain text. Links become clickable.79 / 280

When to use #

Use it for

  • Notes, descriptions and messages longer than a line.
  • Anywhere a native textarea is right but needs the shared styling.

Skip it when

  • The text is formatted; use the rich text editor.
  • A single line is enough; use an input.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/textarea.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { useState } from "react"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export function NoteField() {
  const [note, setNote] = useState("Invoices now show tabular figures, and eu-central-1 cold starts are 38% faster.");
  const over = note.length - 280;
  return (
    <div className="grid w-full max-w-sm gap-1.5">
      <Label htmlFor="docs-note">Release notes <span className="font-normal text-muted-foreground">Shown in the changelog</span></Label>
      <Textarea id="docs-note" value={note} aria-invalid={over > 0 || undefined} aria-describedby="docs-note-msg" placeholder="What changed, in a sentence or two" onChange={(event) => setNote(event.currentTarget.value)} />
      <p id="docs-note-msg" role="status" className={over > 0 ? "flex text-xs text-danger" : "flex text-xs text-muted-foreground"}>
        <span className="flex-1">{over > 0 ? `${over} characters over. Shorten the note to publish.` : "Plain text. Links become clickable."}</span>
        <span className="font-mono text-[11px] tabular-nums">{note.length} / 280</span>
      </p>
    </div>
  );
}

API reference #

Textarea

component

No props of its own; it accepts the native props of its root element.

Accessibility #

It is built on native elements, so roles and focus come from the browser.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.