Textarea

A multi-line text input that wraps the native <textarea> with consistent styling and Field integration.

$npx shadcn add @patchui/textarea

Basic

Custom Rows

Disabled

Usage

import { Textarea } from "@patchui/react";
 
// Basic
<Textarea placeholder="Write something…" />
 
// Custom rows
<Textarea placeholder="Tall textarea" rows={6} />
 
// Unstyled
<Textarea unstyled className="my-custom-textarea" />

Props

Prop	Type	Default	Description
rows	number	-	The number of visible text rows. The textarea uses CSS field-sizing by default, so it auto-grows; set rows to enforce a minimum height.
unstyled	boolean	false	When true, removes all default styling so you can apply your own.
disabled	boolean	false	Disables the textarea, preventing interaction.
placeholder	string	-	Placeholder text shown when the textarea is empty.
className	string	-	Additional CSS classes applied to the outer wrapper.

Notes

Auto-growing: The textarea uses field-sizing: content by default, so it grows with its content. The rows prop sets a minimum visible height.
Field integration: Internally wraps the native textarea with Base UI's Field.Control, enabling integration with the Field component for labels, descriptions, and validation messages.