# Textarea

Displays a form textarea or a component that looks like a textarea.

Page: https://sui.draco.dev/docs/components/textarea

### Example: textarea-demo

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

export default function TextareaDemo() {
  return <Textarea placeholder="Type your message here." />;
}
```

## Installation

```bash
bunx --bun shadcn@latest add @sui/textarea
```

Install with the shadcn CLI or use the shared `@workspace/ui` package. Follow the [installation guide](/docs/installation) to configure the registry, load styles, and choose import aliases.

## Usage

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

```tsx
<Textarea />
```

## Field

Use `Field`, `FieldLabel`, and `FieldDescription` to create a textarea with a label and description.

### Example: textarea-field

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@workspace/ui/components/field";
import { Textarea } from "@workspace/ui/components/textarea";
import { useId as usePreviewId } from "react";

export function TextareaField() {
  const previewId = usePreviewId();

  return (
    <Field>
      <FieldLabel htmlFor={`${previewId}-textarea-message`}>Message</FieldLabel>
      <FieldDescription>Enter your message below.</FieldDescription>
      <Textarea
        id={`${previewId}-textarea-message`}
        placeholder="Type your message here."
      />
    </Field>
  );
}

export default TextareaField;
```

## Disabled

Use the `disabled` prop to disable the textarea. To style the disabled state, add the `data-disabled` attribute to the `Field` component.

### Example: textarea-disabled

```tsx
import { Field, FieldLabel } from "@workspace/ui/components/field";
import { Textarea } from "@workspace/ui/components/textarea";
import { useId as usePreviewId } from "react";

export function TextareaDisabled() {
  const previewId = usePreviewId();

  return (
    <Field data-disabled>
      <FieldLabel htmlFor={`${previewId}-textarea-disabled`}>
        Message
      </FieldLabel>
      <Textarea
        id={`${previewId}-textarea-disabled`}
        placeholder="Type your message here."
        disabled
      />
    </Field>
  );
}

export default TextareaDisabled;
```

## Invalid

Use the `aria-invalid` prop to mark the textarea as invalid. To style the invalid state, add the `data-invalid` attribute to the `Field` component.

### Example: textarea-invalid

```tsx
import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@workspace/ui/components/field";
import { Textarea } from "@workspace/ui/components/textarea";
import { useId as usePreviewId } from "react";

export function TextareaInvalid() {
  const previewId = usePreviewId();

  return (
    <Field data-invalid>
      <FieldLabel htmlFor={`${previewId}-textarea-invalid`}>Message</FieldLabel>
      <Textarea
        id={`${previewId}-textarea-invalid`}
        placeholder="Type your message here."
        aria-invalid
      />
      <FieldDescription>Please enter a valid message.</FieldDescription>
    </Field>
  );
}

export default TextareaInvalid;
```

## Button

Pair with `Button` to create a textarea with a submit button.

### Example: textarea-button

```tsx
import { Button } from "@workspace/ui/components/button";
import { Textarea } from "@workspace/ui/components/textarea";

export function TextareaButton() {
  return (
    <div className="grid w-full gap-2">
      <Textarea placeholder="Type your message here." />
      <Button>Send message</Button>
    </div>
  );
}

export default TextareaButton;
```

## RTL

To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl).

### Example: textarea-rtl

```tsx
"use client";

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@workspace/ui/components/field";
import { Textarea } from "@workspace/ui/components/textarea";
import { useId as usePreviewId } from "react";
import { type Translations, useTranslation } from "./support";

const translations: 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: "שתף את מחשבותיך על השירות שלנו.",
    },
  },
};

export default function TextareaRtl() {
  const previewId = usePreviewId();

  const { dir, t } = useTranslation(translations, "ar");

  return (
    <Field className="w-full max-w-xs" dir={dir}>
      <FieldLabel htmlFor={`${previewId}-feedback`} dir={dir}>
        {t.label}
      </FieldLabel>
      <Textarea
        id={`${previewId}-feedback`}
        placeholder={t.placeholder}
        dir={dir}
        rows={4}
      />
      <FieldDescription dir={dir}>{t.description}</FieldDescription>
    </Field>
  );
}
```