Textarea
A text area for React that resizes vertically by dragging its corner, with a real label and helper and error text that animate in. Counts in the helper text, such as 120 characters left, roll their digits. It forwards every native textarea prop, including rows and maxLength.
pnpm dlx shadcn@latest add @uiarc/textareaLive · keyboard ready
- Free-form multi-line text like bios, comments, or feedback.
- Fields with a live character count, which rolls its digits in the helper row.
- Use input for single-line values.
- Use inline-edit with multiline for a description edited in place on a page.
- Use tag-input when the text is really a list of short values.
Installation
Add Textarea with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/textareaAdds the component and its local dependencies, and installs motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Textarea } from "@/components/arc/textarea/textarea"; export function BioField() { const [bio, setBio] = useState(""); return ( <Textarea label="Bio" rows={4} value={bio} onChange={(event) => setBio(event.target.value)} description={`${280 - bio.length} characters left`} /> );}Textarea
A labelled multi-line field with the same animated helper and error rows as Input.
PropTypeDefaultDescription
labelRequiredstring–Visible label, tied to the textarea with htmlFor.descriptionstring–Helper copy under the field, linked through aria-describedby. Counts such as "120 characters" roll their digits.errorstring–Error copy. Sets aria-invalid and renders in a role="alert" row....propsTextareaHTMLAttributes<HTMLTextAreaElement>–Forwarded to the native textarea, including ref, rows, value, onChange, and maxLength.- Native textarea with a real label.
- Description and error ids are merged into aria-describedby; errors set aria-invalid and use role="alert".
- Animated copy is aria-hidden and mirrored in a visually hidden plain-text span.
- Message rows open their height on a smooth spring; changed words rise in with a soft blur and counts roll only the digits that changed.
- Reduced motion drops the roll, blur, and height spring for instant changes.
- It fills its column with a 110px minimum height and a vertical resize handle; it does not auto-grow with content.
- Hover border styles apply only on hover-capable fine pointers.
- One ResizeObserver per field measures the helper row for its height spring; cheap for a form, but avoid hundreds in a table.
- Recomputing a character count on each keystroke only re-renders the helper row words that changed.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for free-form, multi-line text. Use input for single lines and inline-edit for text edited in place on a page.
- A live character count in description gets the rolling-digit treatment for free.
The full library index for assistants is at /llms.txt.
Avatar uploadProComponentClick or drop a photo onto the avatar to crop it in place with drag, pinch and zoom. It uploads through a progress ring and settles, with clear errors and retry.Emoji pickerProComponentA full emoji picker with instant search, scroll-synced categories, skin tones, recently used emoji, and a virtualized, keyboard-navigable grid.
Wallet stackProComponentFan a stack of cards and lift one out to see its activity.