---
import { Textarea } from "@/components/ui/textarea"
---
<Textarea placeholder="Type your message here." />Installation
npx shadcn@latest add @fulldev/textareaUsage
import { Textarea } from "@/components/ui/textarea"<Textarea placeholder="Type your message here." />Textarea renders a native textarea that grows with its content
(field-sizing-content). Set rows for a taller default height.
Field
Use Field, FieldLabel and FieldDescription to add a label and description.
Enter your message below.
---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
---
<Field>
<FieldLabel for="textarea-message">Message</FieldLabel>
<FieldDescription>Enter your message below.</FieldDescription>
<Textarea id="textarea-message" placeholder="Type your message here." />
</Field>Disabled
Add disabled to the Textarea and data-disabled to the Field for
styling.
---
import { Field, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
---
<Field data-disabled>
<FieldLabel for="textarea-disabled">Message</FieldLabel>
<Textarea
id="textarea-disabled"
placeholder="Type your message here."
disabled
/>
</Field>Invalid
Add aria-invalid="true" to the Textarea and data-invalid to the Field
for styling.
Please enter a valid message.
---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
---
<Field data-invalid>
<FieldLabel for="textarea-invalid">Message</FieldLabel>
<Textarea
id="textarea-invalid"
placeholder="Type your message here."
aria-invalid="true"
/>
<FieldDescription>Please enter a valid message.</FieldDescription>
</Field>Button
Pair with Button to create a textarea with a submit button.
---
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"
---
<div class="grid w-full gap-2">
<Textarea placeholder="Type your message here." />
<Button>Send message</Button>
</div>RTL
Set dir="rtl" on the field or a parent element.
شاركنا أفكارك حول خدمتنا.
---
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Textarea } from "@/components/ui/textarea"
const translations = {
en: {
dir: "ltr",
values: {
label: "Feedback",
placeholder: "Your feedback helps us improve...",
description: "Share your thoughts about our service.",
},
},
ar: {
dir: "rtl",
values: {
label: "التعليقات",
placeholder: "تعليقاتك تساعدنا على التحسين...",
description: "شاركنا أفكارك حول خدمتنا.",
},
},
he: {
dir: "rtl",
values: {
label: "משוב",
placeholder: "המשוב שלך עוזר לנו להשתפר...",
description: "שתף את מחשבותיך על השירות שלנו.",
},
},
} as const
const { dir, values: t } = translations.ar
---
<Field class="w-full max-w-xs" dir={dir}>
<FieldLabel for="feedback" dir={dir}>
{t.label}
</FieldLabel>
<Textarea id="feedback" placeholder={t.placeholder} dir={dir} rows={4} />
<FieldDescription dir={dir}>{t.description}</FieldDescription>
</Field>API Reference
Source: src/components/ui/textarea
Textarea accepts all native textarea attributes.