--- title: Textarea description: Displays a form textarea or a component that looks like a textarea. --- ```tsx import { Textarea } from "@/components/ui/textarea"; export function TextareaDemo() { return

;
}
```

## Installation

## Usage

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

```tsx
<Textarea />
```

## Examples

### Sizes

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

export function TextareaDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Textarea size="xs" placeholder="Type your message here." />
      <Textarea size="sm" placeholder="Type your message here." />
      <Textarea size="default" placeholder="Type your message here." />
      <Textarea size="lg" placeholder="Type your message here." />
      <Textarea size="xl" placeholder="Type your message here." />
    </div>
  );
}
```

### Disabled

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

export function TextareaDemo() {
  return <Textarea disabled placeholder="Type your message here." className="max-w-sm" />;
}
```

### Invalid

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

export function TextareaDemo() {
  return <Textarea aria-invalid placeholder="Type your message here." className="max-w-sm" />;
}
```

### Resize

By default, the textarea is resizable vertically. You can customize the resize behavior using **CSS** `resize` property.

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

export function TextareaDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5 *:flex *:flex-col *:gap-2">
      <div>
        <label htmlFor="resize-horizontal" className="inline-block font-medium text-sm">
          Resize horizontal:
        </label>
        <Textarea
          id="resize-horizontal"
          placeholder="Type your message here."
          className="max-w-sm resize-x"
        />
      </div>
      <div>
        <label htmlFor="resize-both" className="inline-block font-medium text-sm">
          Resize both:
        </label>
        <Textarea
          id="resize-both"
          placeholder="Type your message here."
          className="max-w-sm resize"
        />
      </div>
      <div>
        <label htmlFor="resize-none" className="inline-block font-medium text-sm">
          Resize none:
        </label>
        <Textarea
          id="resize-none"
          placeholder="Type your message here."
          className="max-w-sm resize-none"
        />
      </div>
    </div>
  );
}
```

### Field

Render `FieldControl` as `Textarea` to integrate with `Field` component. This allows you to use `FieldLabel`, `FieldDescription`, and `FieldError` components seamlessly with the textarea.

```tsx
import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Textarea } from "@/components/ui/textarea";

export function TextareaDemo() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Enter your message</FieldLabel>
      <FieldControl render={<Textarea placeholder="Type your message here." />} />
      <FieldDescription>
        Make sure to be respectful and follow our community guidelines.
      </FieldDescription>
    </Field>
  );
}
```

## API Reference

### Textarea props