Multi-line field on the sunken well that grows with a spring between min and max rows, with a ring-gauge character counter, a resize handle and a toolbar slot.
textareaformauto-growcharacter countcommentmultiline
Installation
$npx shadcn@latest add @geturui/textarea
Also installs: Field
Usage
usage.tsx
1import { Textarea } from "@/components/ui/textarea";
2
3export function ReleaseNotes() {
4 return (
5 <Textarea
6 label="Release notes"
7 hint="Grows as you type, up to eight lines."
8 maxLength={280}
9 minRows={3}
10 maxRows={8}
11 placeholder="What shipped this week?"
12 />
13 );
14}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "md" | Text size and padding of the well. |
label / hint / error / required | ReactNode / ReactNode / ReactNode / boolean | — | Field shell: label with required marker, helper line, error that shakes the well once. |
autoGrow | boolean | true | Grow with the content on a spring. Off keeps the height at minRows. |
minRows / maxRows | number | 3 / 8 | Height range in lines; beyond maxRows the field scrolls. |
maxLength | number | — | Native limit. Shows a counter with a ring gauge in the label row. |
showCount | boolean | true with maxLength | Hide or show the counter. |
warnAt | number | 0.8 | Fraction of maxLength where the counter turns to a warning; at the limit it turns danger and shakes once. |
resizable | boolean | false | Corner handle to make the field taller by drag, or by arrow keys when focused. |
toolbar | ReactNode | — | Row of controls inside the well under the text. |
labelAside | ReactNode | — | Extra text on the label row, beside the counter. |
readOnly / disabled | boolean | — | Read-only shows a dashed, flat well; disabled dims it. |
value / defaultValue / onValueChange | string / string / (value: string) => void | — | Controlled or uncontrolled text. The native onChange still fires. |
Accessibility
- The label, hint or error and the character count are all linked to the textarea.
- Crossing into the warning zone and reaching the limit are announced once each through a polite live region, not on every keystroke.
- The resize handle is a focusable separator: ArrowUp and ArrowDown change the height by a line, Home resets it.
- Height changes apply instantly under reduced motion, and the counter does not shake.