Primitives
Primitive
Textarea
Multi-line text input for longer form content
A textarea collects multi-line text that grows with its content. Use it for comments, messages, or descriptions; for a single line such as a name or email, use Input instead.
Preview
Installation
Usage
Examples
With Label
Pair the textarea with a Label for an accessible, clickable field name.
With Helper Text
Add helper text below the field for guidance or validation messages.
Write a brief description of your project. Markdown is supported.
Controlled
Use value and onChange to drive the textarea's value yourself.
0/500 characters
Disabled State
Set disabled to block input and dim the field.
Elevated Variant
Use variant="elevated" for a translucent overlay that adapts to the substrate, so the field reads clearly on a Card, Dialog, or popover instead of collapsing into it. See the Surfaces docs.
On a Card surface
Use
variant="elevated" when the textarea sits inside a Card, Dialog, or popover.| Variant | Description |
|---|---|
default | Opaque bg-input, for fields on the page background. |
elevated | Translucent bg-input-elevated, for raised surfaces. |
API Reference
Props
Prop
Type
Default