Textarea
A multi-line text input that grows with its content. Three surface variants – outline, subtle, and ghost – in four sizes.
Playground
<Textarea placeholder="Write a short bio..." />Preview
A styled native textarea. Thanks to field-sizing-content it auto-grows from its size's minimum height as you type.
<Textarea placeholder="Write a short bio..." />Installation
npx shadcn@latest add https://espresso-base-ui.vercel.app/r/textarea.jsonUsage
import { Textarea } from "@/components/ui/textarea"<Textarea variant="subtle" size="sm" placeholder="Leave a comment" />Variants
variant picks the surface: outline draws a shadow ring on a transparent background, subtle sits on a filled bg-secondary surface, and ghost is fully transparent until hovered – all three lift to a raised, white-surfaced state on focus.
<Textarea variant="outline" placeholder="Outline" />
<Textarea variant="subtle" placeholder="Subtle" />
<Textarea variant="ghost" placeholder="Ghost" />Sizes
Four sizes scale the minimum height, padding, radius and type: xs, sm, md and lg. The outline variant trims 2px off each minimum height to account for its shadow ring.
<Textarea size="xs" placeholder="Extra Small (xs)" />
<Textarea size="sm" placeholder="Small (sm)" />
<Textarea size="md" placeholder="Medium (md)" />
<Textarea size="lg" placeholder="Large (lg)" />Validation states
Set data-valid or data-invalid to tint the field green or red – outline recolors its ring, subtle and ghost swap to bg-success / bg-error surfaces. data-filled marks a settled value. Inside a Field group the invalid ring also follows group-data-[invalid] automatically.
<Textarea data-valid="true" defaultValue="Valid" />
<Textarea data-invalid="true" defaultValue="Invalid" />
<Textarea data-filled="true" defaultValue="Filled" />Disabled
The native disabled attribute blocks interaction, shows a not-allowed cursor and washes out the text and placeholder; outline and ghost stay transparent while subtle drops to bg-input.
<Textarea variant="outline" disabled placeholder="Outline disabled" />
<Textarea variant="subtle" disabled placeholder="Subtle disabled" />API reference
Textarea renders a native textarea and accepts className plus all standard textarea attributes (placeholder, disabled, rows, value, ...).
Textarea
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "outline" | "subtle" | "ghost" | "outline" | Surface – shadow-ringed outline, filled subtle, or transparent ghost. All raise to a focused surface with shadow-raised. |
| size | "xs" | "sm" | "md" | "lg" | "md" | Minimum height, padding, radius and type scale. The field auto-grows past the minimum with its content. |
Styling hooks
The element carries data-slot="textarea" and reflects its props as data-variant and data-size. It also styles itself off consumer-set state attributes – data-filled, data-invalid and data-valid – so form libraries can drive appearance without extra classes. The textareaVariants cva helper is exported for custom compositions:
import { textareaVariants } from "@/components/ui/textarea"
<textarea className={cn(textareaVariants({ variant: "subtle", size: "sm" }))} />