---
title: Textarea
description: Displays a form textarea or a component that looks like a textarea.
icon: text-align-start
author:
  name: shadcn
  url: https://github.com/shadcn
mode: wide
---

<PoweredBy packages={[{ name: 'Shadcn UI', url: 'https://ui.shadcn.com/docs/components/textarea' }]} />

### Installation

```package-install
npx shadcn@latest add @redpanda/textarea
```

<ComponentPreview name="textarea-demo" />

## When to use

Textarea provides multi-line text input. Use this decision tree:

```mermaid
graph TD;
    A[❓ Need text input?] --> B{Multi-line content?};
    A --> C[⚠️ Use other input components];
    B --> D[✅ Use Textarea];
    B --> E{Single line sufficient?};
    D --> F{Content type?};
    E --> G[⚠️ Use Input component];
    F --> H[✅ Long descriptions];
    F --> I[✅ Comments/Messages];
    F --> J[✅ Code/JSON input];

    classDef recommended fill:#4ade80,stroke:#22c55e,stroke-width:2px,color:#000;
    classDef discouraged fill:#fbbf24,stroke:#f59e0b,stroke-width:2px,color:#000;
    classDef decision fill:#60a5fa,stroke:#3b82f6,stroke-width:2px,color:#fff;
    classDef neutral fill:#9ca3af,stroke:#6b7280,stroke-width:2px,color:#fff;

    class D,H,I,J recommended;
    class C,G discouraged;
    class A,B,E,F decision;
```

## Usage

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

```tsx
<Textarea />
```

## Examples

### Default

<ComponentPreview name="textarea-demo" description="A textarea" />

### Disabled

<ComponentPreview name="textarea-disabled-demo" description="A disabled textarea" />

### With Label

<ComponentPreview
  name="textarea-with-label-demo"
  className="[&_div.grid]:w-full"
  description="A textarea with a label"
/>

### With Text

<ComponentPreview name="textarea-with-text-demo" description="A textarea with text" />

### With Button

<ComponentPreview name="textarea-with-button-demo" description="A textarea with a button" />

### Form

<ComponentPreview name="textarea-form-demo" description="A textarea component used in a form." />

## Appearance and behavior

Use the finite recipes instead of overriding the control's owned border, padding, color, or typography.

| Prop         | Supported values                                           | Use                                                                |
| ------------ | ---------------------------------------------------------- | ------------------------------------------------------------------ |
| `size`       | `sm`, `md` (default), `lg`                                 | Minimum height and padding                                         |
| `resize`     | `auto` (default), `none`, `vertical`, `horizontal`, `both` | Content growth or native resize direction                          |
| `appearance` | `standard` (default), `embedded`, `document`               | Normal field, InputGroup-owned chrome, or recessed document editor |
| `textStyle`  | `standard` (default), `monospace`, `code`, `code-compact`  | Default text, monospace values, JSON, or dense code documents      |

```tsx
<Textarea aria-label="Payload JSON" resize="vertical" textStyle="code" />
<Textarea
  appearance="document"
  aria-label="CSS overrides"
  resize="none"
  spellCheck={false}
  textStyle="code-compact"
/>
```

Use `InputGroupTextarea` inside `InputGroup`; the group owns its border and focus ring. Keep `className` for surrounding layout and dimensions, not appearance overrides. `Textarea` forwards native props and refs, so controlled edits, form values, keyboard input, and validation stay native. Within `Field`, invalid state and error descriptions are inherited unless explicitly supplied.

For custom validation, give the editor an accessible name and associate its visible error using `aria-invalid` and `aria-describedby`. Keep an invalid JSON draft editable so users can correct it without losing their input.

The form-control matrix shows only real rest, filled, invalid, and disabled states. Its static specimens are inert; use the linked interaction gallery to exercise actual hover and keyboard focus rather than painted approximations.

## Credits

- We take our inspiration from [Shadcn UI](https://ui.shadcn.com/docs/components/textarea) for the textarea style.