Textarea

A styled <textarea> element with design-system borders, focus rings, and validation states. It uses field-sizing-content to automatically grow with its content while maintaining a minimum height.

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

export default function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />
}

Anatomy

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

<Textarea placeholder="Type your message here." />

Examples

Basic textarea

<Textarea placeholder="Type your message here." />

With label

<div className="grid gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea id="message" placeholder="Type your message here." />
</div>

Disabled

<Textarea placeholder="Disabled" disabled />

API Reference

Textarea

Renders a styled <textarea> element.

Prop	Type	Default	Description
`placeholder`	`string`	—	Placeholder text shown when the field is empty.
`disabled`	`boolean`	`false`	Whether the textarea is disabled.
`className`	`string`	—

Accepts all standard textarea HTML attributes.