Name : Textarea
Description : Displays a form textarea or a component that looks like a textarea.

---

### import

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

---

### use

```textarea.mdx
<Textarea />
```

---

### examples

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

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

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

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

```textarea-with-button.tsx
import { Button } from "@/components/ui/button"
import { Textarea } from "@/components/ui/textarea"

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

```textarea-with-label.tsx
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaWithLabel() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message">Your message</Label>
      <Textarea placeholder="Type your message here." id="message" />
    </div>
  )
}
```

```textarea-with-text.tsx
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"

export default function TextareaWithText() {
  return (
    <div className="grid w-full gap-1.5">
      <Label htmlFor="message-2">Your Message</Label>
      <Textarea placeholder="Type your message here." id="message-2" />
      <p className="text-sm text-muted-foreground">
        Your message will be copied to the support team.
      </p>
    </div>
  )
}
```
