Textarea

Multi-line text input for longer form content, with an error state and resizable height.

Installation

npx asteria-ui add textarea

Usage

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

<Textarea placeholder="Write a message..." />

Unlike Input, Textarea has no icon slots in its spec, so it's a single unwrapped <textarea> — no bordered wrapper div needed. Pair it with Field for a label and helper/error text.

Examples

States

API reference

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg" \| "xl"	"md"	Minimum height — 80 / 96 / 112 / 128px. Resizable beyond that.
error	boolean	—	Marks the textarea invalid — sets aria-invalid and the error border color.

Accessibility

Role. Native <textarea>, so role="textbox" with an implicit multiline hint is automatic.
Label. Requires an associated label via Field, same as Input.
Error. The error prop sets aria-invalid="true" directly on the element.
Resize. Resizable via the native browser drag handle (resize-y).