videorc/uiTextarea
A multi-line text field that grows with its content, at 14 px on the chip radius. Inside a Field, its label names it and its descriptions describe it.
Installation
$ pnpm dlx shadcn@latest add @videorc/textareaUsage
import { Textarea } from "@/components/ui/textarea";<Field>
<FieldLabel>Description</FieldLabel>
<Textarea placeholder="Optional" />
</Field>Examples
States
Set aria-invalid and put a FieldError under it when its text is refused. A disabled textarea inside a Field says why in its description.
Theming
| Token or attribute | Meaning |
|---|---|
field-sizing-content | Grows with its text, from a 64 px minimum |
rounded-chip | The 6 px control radius |
bg-input/50 | The recessed field fill |
text-sm | 14 px at every width |
aria-invalid | Draws the destructive border and ring |
data-slot="textarea" | The textarea, for styling from a parent |
It doesn't resize by hand. Pass resize-y and a taller min-h-* for a long description.
Accessibility
Inside a Field, the FieldLabel names the textarea and every FieldDescription describes it. Outside one, pass aria-label, or a Label with htmlFor. An explicit id or aria-describedby always wins.
API reference
Every <textarea> attribute, plus:
Prop
Type
Input
A text field at the 28 px desktop control height, on Base UI's Input. Inside a Field, its label names it and its descriptions describe it with no ids to wire.
Input Group
One 28 px field with icons, text and buttons inside it, on the chip radius. Its focus and invalid rings draw around the whole group.