Textarea
Displays a form textarea or a component that looks like a textarea.
Powered by
Shadcn UIInstallation
npx shadcn@latest add @redpanda/textareapnpm dlx shadcn@latest add @redpanda/textareayarn dlx shadcn@latest add @redpanda/textareabunx shadcn@latest add @redpanda/textareanubx shadcn@latest add @redpanda/textareaaube dlx shadcn@latest add @redpanda/textareaWhen to use
Textarea provides multi-line text input. Use this decision tree:
Usage
import { Textarea } from '@/components/ui/textarea';<Textarea />Examples
Default
Disabled
With Label
With Text
With Button
Form
Appearance and behavior
Use the finite recipes instead of overriding the control’s owned border, padding, color, or typography.
| Prop | Supported values | Use |
|---|---|---|
size |
sm, md (default), lg |
Minimum height and padding |
resize |
auto (default), none, vertical, horizontal, both |
Content growth or native resize direction |
appearance |
standard (default), embedded, document |
Normal field, InputGroup-owned chrome, or recessed document editor |
textStyle |
standard (default), monospace, code, code-compact |
Default text, monospace values, JSON, or dense code documents |
<Textarea aria-label="Payload JSON" resize="vertical" textStyle="code" /><Textarea appearance="document" aria-label="CSS overrides" resize="none" spellCheck={false} textStyle="code-compact"/>Use InputGroupTextarea inside InputGroup; the group owns its border and focus ring. Keep className for surrounding layout and dimensions, not appearance overrides. Textarea forwards native props and refs, so controlled edits, form values, keyboard input, and validation stay native. Within Field, invalid state and error descriptions are inherited unless explicitly supplied.
For custom validation, give the editor an accessible name and associate its visible error using aria-invalid and aria-describedby. Keep an invalid JSON draft editable so users can correct it without losing their input.
The form-control matrix shows only real rest, filled, invalid, and disabled states. Its static specimens are inert; use the linked interaction gallery to exercise actual hover and keyboard focus rather than painted approximations.
Credits
- We take our inspiration from Shadcn UI for the textarea style.