Textarea
A multi-line text control that grows with its content and supports three density presets.
Use Textarea for values that can contain line breaks. Use Input for single-line values.
Labeled textarea
Installation
$npx shadcn@latest add @patchui/textarea
The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/textarea.tsx.
Usage
<Field>
<FieldLabel>Release notes</FieldLabel>
<Textarea id="release-notes" />
</Field>Textarea grows through CSS field-sizing: content. The rows attribute establishes a minimum height.
Examples
Size, rows, and states
Use rows to establish minimum space. Read-only content remains selectable, while disabled content is unavailable.
Size, rows, and states
API reference
Textarea accepts native textarea attributes. These props select Patch UI presentation.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "lg" | "md" | Sets text size and padding. |
| variant | "default" | "unstyled" | "default" | Removes control chrome when another component owns the surface. |
| rows | number | - | Sets the minimum visible row count while preserving automatic growth. |
Accessibility
- Associate every Textarea with a visible label.
- Connect helper text and errors with Field or
aria-describedby. - Read-only values remain selectable and copyable; disabled values do not.