Primitives
Textarea
Multiline text field with CSS-first auto-growth.
Composition
The preferred shape for composing the installed primitive from its exported parts.
Root
Single-slot surface with no nested parts.
TextareaThe refined source installs this primitive from src/registry/sources/refined/ui/textarea.tsx. Install it on its own with the command above, or inspect the source below.
npx shadcn@latest add http://127.0.0.1:3000/r/refined/textarea.jsonRaw code
Primary installed primitive source
Textarea slot
src/registry/sources/refined/ui/textarea.tsx
import type { TextareaProps } from "@/components/refined-ui/contracts";import { cn } from "@/components/refined-ui/lib/cn";import { skinSlot } from "@/components/refined-ui/skin";// NOT Base UI — plain <textarea>, mirrors Input surface but drops single-line height for its own px-3/py-2 rhythm.// Auto-grow is CSS-first via `field-sizing-content` (bounded min-h/max-h) — no ResizeObserver, no JS measuring, resize off.// data-[invalid] surfaces validation inside a Field.export function Textarea({ className, ...props }: TextareaProps) { return ( <textarea data-ui="agent" data-slot="textarea" className={cn( "field-sizing-content min-h-16 max-h-64 w-full min-w-0 resize-none rounded-[var(--radius-control)] bg-card/72 px-3 py-2 text-body text-foreground shadow-sm ring-1 ring-inset ring-border outline-none transition placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-foreground/20 disabled:cursor-not-allowed disabled:opacity-50 data-[invalid]:ring-2 data-[invalid]:ring-destructive", skinSlot("textarea", {}), className, )} {...props} /> );}