Textarea
A multi-line text field that grows with its content, for notes, descriptions and messages.
npx prodular-ui add textareaWith a field
Grows with the text. Markdown is supported.
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"import { Textarea } from "@/components/ui/textarea"
export default function TextareaDefault() { return ( <Field className="max-w-md"> <FieldLabel>Release notes</FieldLabel> <Textarea placeholder="What changed in this release, and who should know?" /> <FieldDescription>Grows with the text. Markdown is supported.</FieldDescription> </Field> )}States
Invalid and disabled.
Add at least 20 characters so finance can review it.
import { Field, FieldError, FieldLabel } from "@/components/ui/field"import { Textarea } from "@/components/ui/textarea"
export default function TextareaStates() { return ( <div className="grid w-full max-w-xl gap-6 sm:grid-cols-2"> <Field invalid> <FieldLabel>Reason for refund</FieldLabel> <Textarea defaultValue="Charged twice" /> <FieldError>Add at least 20 characters so finance can review it.</FieldError> </Field> <Field disabled> <FieldLabel>Internal note</FieldLabel> <Textarea defaultValue="Locked after the invoice was sent on 14 October." /> </Field> </div> )}Anatomy
<Field> <FieldLabel>Release notes</FieldLabel> <Textarea placeholder="What changed in this release?" /></Field>Guidance
Use it when
- Text that can run to several sentences: descriptions, release notes, feedback, welcome messages.
Avoid
- Single values like a name or a title. Use Input.
- Rich text editing. Textarea is plain text only.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Wrap it in Field with a FieldLabel. The label and description are linked automatically.
- It grows with its content through field-sizing. Set a max height with className (for example max-h-64) when the text can get long.
- Say in FieldDescription if Markdown or a character limit applies.
API
Textarea
| Prop | Type | Default | Description |
|---|---|---|---|
| rows | number | Initial visible rows in browsers without field-sizing support. | |
| aria-invalid | boolean | Error border and ring. Set automatically inside an invalid Field. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add textarea# or, with the registry in components.jsonnpx shadcn@latest add @prodular/textarea