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

<ComponentExample src="/components/examples/textarea/demo.tsx">
  <TextareaDemo />
</ComponentExample>

## Installation

```bash
npx shadcn-ui add textarea
```

<Accordion type="single" collapsible>
  <AccordionItem value="manual-installation">
    <AccordionTrigger>Manual Installation</AccordionTrigger>
    <AccordionContent>

1. Copy and paste the following code into your project.

<ComponentSource src="/components/ui/textarea.tsx" />

<Callout>
  This is the `<Textarea />` primitive. You can place it in a file at
  `components/ui/textarea.tsx`.
</Callout>

    </AccordionContent>

  </AccordionItem>
</Accordion>

## Usage

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

```tsx
<Textarea />
```

## Examples

### Default

<ComponentExample src="/components/examples/textarea/demo.tsx">
  <TextareaDemo />
</ComponentExample>

---

### Disabled

<ComponentExample src="/components/examples/textarea/disabled.tsx">
  <TextareaDisabled />
</ComponentExample>

---

### With Label

<ComponentExample
  src="/components/examples/textarea/with-label.tsx"
  className="[&_div.grid]:w-full"
>
  <TextareaWithLabel />
</ComponentExample>

---

### With Text

<ComponentExample src="/components/examples/textarea/with-text.tsx">
  <TextareaWithText />
</ComponentExample>

---

### With Button

<ComponentExample src="/components/examples/textarea/with-button.tsx">
  <TextareaWithButton />
</ComponentExample>