Textarea
A multiline field for notes, descriptions, and longer text.
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 "@/registry/components/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.