Getting Started
Textarea
A multi-line text input field with support for custom styling and states.
Loading
Installation
pnpm dlx shadcn@latest add @toui/textarea
Examples
Disabled
Loading
Readonly
Loading
Size
Loading
Form
Loading
Pattern
Tokens
10 CSS variables in 4 categories.
px
| CSS Variable | Value | Description |
|---|---|---|
--textarea-px-sm | var(--component-px-sm) | — |
--textarea-px-md | var(--component-px-md) | — |
--textarea-px-lg | var(--component-px-lg) | — |
py
| CSS Variable | Value | Description |
|---|---|---|
--textarea-py-sm | 0.375rem | 6px — compact |
--textarea-py-md | 0.5rem | 8px — default |
--textarea-py-lg | 0.625rem | 10px — large |
text
| CSS Variable | Value | Description |
|---|---|---|
--textarea-text-sm | var(--component-text-xs) | — |
--textarea-text-md | var(--component-text-sm) | — |
--textarea-text-lg | var(--component-text-md) | — |
radius
| CSS Variable | Value | Description |
|---|---|---|
--textarea-radius | var(--component-radius-md) | — |
API Reference
This is a custom component that extends the native HTML textarea element.
Textarea
| Prop | Type | Default |
|---|---|---|
variant | ||
className |