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

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

## Installation

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>

## Usage

Copy and paste the code examples below into your project.

## 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>