# Textarea with counter

Multi-line text (product descriptions, notes, support replies) with a live character counter that turns amber near the limit and red over it.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Textarea
- **Build:** shadcn `Textarea` + a counter.
- **In apps/admin today:** Not in apps/admin.
- **Client component:** yes. 

## Content rules

- Counter format "212 / 300".

## Do

- Show the limit before it is hit.

## Don't

- Truncate silently.

## Accessibility

- **Keyboard:** Enter adds a line; Ctrl/⌘ + Enter submits in a composer.
- **ARIA:** Counter is `aria-live="polite"` and only announces at 90% and over.
- **Focus:** Halo ring.

## Tokens

`--muted-foreground` `--s-3` `--input` `--r-control` `--background` `--text-body` `--lh-body` `--font-ui` `--ring` `--focus-ring` `--destructive` `--muted` `--w-medium` `--text-micro` `--warning` `--control-h` `--s-2` `--r-chip` `--accent` `--accent-foreground` `--text-small` `--motion-hover` `--primary` `--foreground`

## Files

`textarea.html` live specimen · `textarea.css` kit rules · `textarea.d.ts` props · full page: `docs/components/textarea/` (phone: `m/`).