Textarea

The Textarea component allows users to enter multi-line text input.

Usage

import { Textarea } from "@/components/ui/textarea";

export function ExampleTextarea() {
  return <Textarea.Root placeholder="Enter description..." />;
}

Preview

Custom Styling

Apply custom focus glow, border colors, or resize behavior via className:

<Textarea.Root placeholder="Write feedback..." className="focus:border-indigo-500 focus:ring-4 focus:ring-indigo-500/20 resize-none min-h-[120px] rounded-xl" />

Styling & Class Names

Target internal textarea CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.textarea`	Root element	Multi-line textarea element (`textarea`).
`textarea--default`	Default variant	Bordered transparent background.
`textarea--filled`	Filled variant	Muted filled background style.

API Reference

Textarea.Root Props

Prop	Type	Default	Description
`variant`	`'default' \| 'filled'`	`'default'`	Visual style of the textarea.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size variant of the textarea.
`disabled`	`boolean`	`false`	Disables user interaction.