Primitive · CLI
Textarea
Soft-rect multi-line control aligned to Atro input tokens.
Preview
npx shadcn@latest add @atroui/textareaInstallation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/textareaSource lands in your repo. Installation · Registry
Usage
Use Textarea when the answer can run past one line. Match Input soft-rect tokens; pair with Field for labels and errors.
tsx
import { Textarea } from "@/components/ui/textarea"
<Textarea placeholder="Message" />Invalid state
aria-invalid is the only switch you need - the destructive border and ring are already in the base styles. Point aria-describedby at the error text so screen readers announce the reason, not just the failure.
Add at least 20 characters.
Auto-sizing height
field-sizing-content is on by default, so the box grows with the text and rows has no effect. Set the ceiling with max-h plus overflow-y-auto; min-h-16 is the floor.
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | - | Hint text. |
| disabled | boolean | false | Disables input. |
| aria-invalid | boolean | false | Applies the destructive border and ring. |
| className | string | - | Extra classes (e.g. max-h-40 to cap auto-growth). |
Textarea