Textarea

Multi-line text input with default, filled, focus, disabled, and invalid states. Matches Input token styling with flexible height for longer text.

Figma: DS-shadcn-001 Foundations · 18684:85575

Import

Live Demo

Textarea states including default, filled, focus, disabled, error, and interactive input.

Figma: DS-shadcn-001 Foundations · Textarea 18684:85575

State reference

Default

Filled

Focus

Disabled

Error

Error (Focus)

Interactive textarea

0 characters

Props

NameTypeDefaultDescription
placeholderstring—Placeholder text when the textarea is empty
disabledbooleanfalseWhether the textarea is disabled
aria-invalidbooleanfalseApplies the destructive border and ring for invalid state
classNamestring—Additional classes for layout or sizing overrides

Examples

Basic Textarea

Filled State

Disabled State

Invalid State

Shown when validation fails.