‹ components

Textarea

draftv0.9.0·open in canvas

Multi-line text entry — Input's sibling, same border/focus/invalid grammar.

Installnpx shadcn add @cids/textarea
Live demo

Motion · tap to replay

honors reduced-motion

150ms on border-color/background-color only. User resize (`resize-y`) is native and unanimated.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Textarea } from "@/design-system";

<Textarea placeholder="Describe the issue…" />
<Textarea rows={5} invalid aria-label="Note" />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

States · from doc

Parsed from the doc. Interact with the live demo for hover/active.

**Rest**: outline-variant border.**Focus**: border raises to outline .**Disabled**: 40% opacityno pointer.

Multi-line text entry — Input's sibling, same border/focus/invalid grammar.

Anatomy

┌─────────────────────────────┐ ← border-outline-variant,
│ placeholder / typed text    │   rounded-control, px-3 py-2
│                             │ ← rows controls initial height
│                            ↕│ ← resize-y only (never horizontal)
└─────────────────────────────┘

Props

PropTypeDefaultNotes
invalidbooleanfalseSets aria-invalid + sell border. Pair with visible error text.
rowsnumber3Initial height in text lines.
classNamestring—cn-merged.
…restTextareaHTMLAttributes—value, onChange, placeholder, disabled, etc.

Motion

150ms on border-color/background-color only. User resize (resize-y)

is native and unanimated.

A11y

Real <textarea> — native semantics, form participation, IME support.

invalid sets aria-invalid for screen readers; the visible error text

next to the field is the actual message. Don't cap length silently —

show a counter if a max matters.

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.