Textarea
A multi-line text field, with optional auto-resize and a character count that knows when to stay quiet.
- Forms
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add textareanpm packages installed: class-variance-authority.
import { Textarea } from "@/components/ui/textarea";Default
With Label
Sizes
Auto Resize
With Count
Near The Limit
Over The Limit
Invalid
Disabled
<Textarea>
| Prop | Type | Default |
|---|---|---|
autoResizeGrows with its content instead of scrolling, up to | boolean | false |
maxRowsCeiling for | number | 12 |
resize | "none" | "vertical" | "both" | "vertical" |
showCountShows a live character count. Needs | boolean | false |
textareaSize | "sm" | "md" | "lg" | "md" |
Plus every attribute of <textarea> except cols.
Pair with a Label via htmlFor/id. The error state is driven by aria-invalid, so assistive technology and styling stay in sync. The character count is described by the field rather than announced on every keystroke — a permanently live counter reads the remaining number between every letter typed, which is unusable — so it goes live only once the limit is close, and states the remainder in words rather than as a bare ratio that is read aloud as two unlabelled numbers. Horizontal resizing is off by default, because a field dragged wider than its container is a broken layout.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes