- Accordion
- AI Elements
- Alert
- Alert Dialog
- Avatar
- Badge
- Breadcrumb
- Button
- ButtonGroup
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Date Picker
- Dialog
- Dropdown Menu
- Field
- File Picker
- Input
- InputGroup
- InputOTP
- Loader
- Menubar
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll Area
- Select
- Sheet
- Sonner
- Table
- Tabs
- Textarea
- Toggle
- Tooltip
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
| Name | Type | Default | Description |
|---|---|---|---|
| placeholder | string | — | Placeholder text when the textarea is empty |
| disabled | boolean | false | Whether the textarea is disabled |
| aria-invalid | boolean | false | Applies the destructive border and ring for invalid state |
| className | string | — | Additional classes for layout or sizing overrides |
Examples
Basic Textarea
Filled State
Disabled State
Invalid State
Shown when validation fails.