100.5k

Textarea

PreviousNext

Displays a form textarea or a component that looks like a textarea.

import { Textarea } from "@/components/ui/textarea"  export function TextareaDemo() {  return <Textarea placeholder="Type your message here." /> }

Installation

pnpm dlx shadcn@latest add textarea

Usage

import { Textarea } from "@/components/ui/textarea"
<Textarea />

Examples

Default

import { Textarea } from "@/components/ui/textarea"  export function TextareaDemo() {  return <Textarea placeholder="Type your message here." /> }

Disabled

import { Textarea } from "@/components/ui/textarea"  export function TextareaDisabled() {  return <Textarea placeholder="Type your message here." disabled /> }

With Label

import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea"  export function TextareaWithLabel() {  return (  <div className="grid w-full gap-3">  <Label htmlFor="message">Your message</Label>  <Textarea placeholder="Type your message here." id="message" />  </div>  ) }

With Text

Your message will be copied to the support team.

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

With Button

import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea"  export function TextareaWithButton() {  return (  <div className="grid w-full gap-2">  <Textarea placeholder="Type your message here." />  <Button>Send message</Button>  </div>  ) }