---
type: doc
title: Textarea
description: Displays a form textarea or a component that looks like a textarea.
---

> Fulldev UI for Astro. The `@fulldev` registry in `components.json` points at `https://ui.full.dev/r/styles/{style}/{name}.json`; see [installation](/astro/docs/installation.md).

```astro title="src/components/examples/textarea/textarea-demo.astro"
---
import { Textarea } from "@/components/ui/textarea"
---

<Textarea placeholder="Type your message here." />
```

## Installation

```bash
npx shadcn@latest add @fulldev/textarea
```

## Usage

```ts
import { Textarea } from "@/components/ui/textarea"
```

```astro
<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.

```astro title="src/components/examples/textarea/textarea-field.astro"
---
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.

```astro title="src/components/examples/textarea/textarea-disabled.astro"
---
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.

```astro title="src/components/examples/textarea/textarea-invalid.astro"
---
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.

```astro title="src/components/examples/textarea/textarea-button.astro"
---
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.

```astro title="src/components/examples/textarea/textarea-rtl.astro"
---
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`](https://github.com/fulldotdev/ui/tree/main/src/components/ui/textarea)

`Textarea` accepts all native `textarea` attributes.

## Install what this page shows

```bash
npx shadcn@latest add @fulldev/textarea-examples
```