Textarea
A multi-line text input field.
Overview
The multi-line sibling of Input, with identical field chrome — an
outline-variant border, primary focus ring, error tone via aria-invalid
and the translucent disabled fill — so mixed forms read as one family. The box
auto-grows with its content (field-sizing-content) from a 64px minimum.
$ npx morpha-ui add textareaExamples
With label
Invalid
Set aria-invalid to switch the field to the error tone.
Your bio must be at least 20 characters.
Disabled
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add textarea. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add textareaAPI Reference
Prop
Type
Accessibility
- Associate a
<Label htmlFor>with the textareaid. - Set
aria-invalid(and describe the error witharia-describedby) to expose validation state. - The field resizes with content, so no text is ever clipped from view.