Textarea
FormsA multi-line text input for longer-form content.
Textareas let users enter a paragraph or more of text. Shelf's textarea matches the design language of the single-line input while giving content room to breathe.
npx shadcn@latest add textareaBasic usage
A resizable textarea with a comfortable minimum height.
Preview
Livetsx
1<Label htmlFor="bio">Bio</Label>2<Textarea id="bio" placeholder="Tell us about yourself…" />
States
Disabled textareas signal that content cannot be edited.
Preview
Livetsx
1<Textarea defaultValue="This can be edited." className="max-w-xs" />2<Textarea defaultValue="This cannot be edited." disabled className="max-w-xs" />
API reference
All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.
| Prop | Type | Description |
|---|---|---|
| value | string | The controlled textarea value. |
| onChange | ChangeEventHandler<HTMLTextAreaElement> | Called when the value changes. |
| placeholder | string | Placeholder shown while the field is empty. |
| disabled | boolean= false | Disables the textarea. |
| rows | number | The number of visible text rows. |
| className | string | Additional classes merged into the textarea. |