Forms
Textarea
Multi-line input that auto-grows, with a live character counter.
A textarea collects longer text such as messages, bios and descriptions. Cuelark's textarea can grow with its content using CSS field-sizing (no resize scripts), and shows a live, politely announced character count that turns amber near the limit.
Preview
0 / 160
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/textarea.jsonThe CLI also installs the Cuelark theme tokens. With the @cuelark namespace configured, use @cuelark/textarea.
Usage
import { Textarea } from "@/components/ui/textarea";
<Textarea autoGrow showCount maxLength={280} />API reference
Textarea
Extends native <textarea> props.
| Prop | Type | Default | Description |
|---|---|---|---|
| autoGrow | boolean | false | Grow with content (field-sizing: content). |
| showCount | boolean | false | Live count; with maxLength shows n / max. |
Accessibility
- The counter is an aria-live region, announced politely as you type.
- Pair with a <label>; set aria-invalid for errors.
FAQ
Also searched as: react textarea · auto resize textarea · textarea character count · shadcn textarea · autosize textarea