Textarea

Note

Installation

pnpm dlx shadcn@latest add @paneui/textarea

Usage

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

<Textarea placeholder="Anything the agent should know?" />

Examples

Disabled

Invalid

With Counter

With Button

Use for short forms that submit straight from the field.

Sizes

Auto height

The field uses field-sizing: content, so it grows with its text from an 80px minimum in browsers that support it.

Text size on phones

Text matches Input on every screen. iOS Safari zooms into a focused field whose text is under 16px; mount iOS Zoom Lock to stop it, or add max-md:text-base for 16px text on phones.

API Reference

Multi-line text field. It adds no props of its own. Also accepts every prop of textarea.

size= "default": "xs" | "sm" | "default" | "lg"; Padding, minimum height (48 / 56 / 64 / 80px) and text size, matching Input. Inside a sized Field it takes the field's size.

Prop	Type	Default	Description
size	"xs" \| "sm" \| "default" \| "lg"	"default"	Padding, minimum height (48 / 56 / 64 / 80px) and text size, matching Input. Inside a sized `Field` it takes the field's size.

data-size: The resolved size.

Data attribute	Description
data-size	The resolved size.