<pre class="shiki " style="background-color: #fff" tabindex="0"><code>import { Textarea } from &quot;@/components/ui/textarea&quot;

export default function TextareaDemo() {
 return &lt;Textarea placeholder=&quot;Type your message here.&quot; /&gt;
}
</code></pre>

<pre class="shiki " style="background-color: #fff" tabindex="0"><code>import { Textarea } from &quot;@/components/ui/textarea&quot;

export default function TextareaDisabled() {
 return &lt;Textarea placeholder=&quot;Type your message here.&quot; disabled /&gt;
}
</code></pre>

<pre class="shiki " style="background-color: #fff" tabindex="0"><code>import { Button } from &quot;@/components/ui/button&quot;
import { Textarea } from &quot;@/components/ui/textarea&quot;

export default function TextareaWithButton() {
 return (
 &lt;div className=&quot;grid w-full gap-2&quot;&gt;
 &lt;Textarea placeholder=&quot;Type your message here.&quot; /&gt;
 &lt;Button&gt;Send message&lt;/Button&gt;
 &lt;/div&gt;
 )
}
</code></pre>

<pre class="shiki " style="background-color: #fff" tabindex="0"><code>import { Field } from &quot;@/components/ui/field&quot;
import { Label } from &quot;@/components/ui/label&quot;
import { Textarea } from &quot;@/components/ui/textarea&quot;

export default function TextareaWithLabel() {
 return (
 &lt;Field&gt;
 &lt;Label htmlFor=&quot;message&quot;&gt;Your message&lt;/Label&gt;
 &lt;Textarea placeholder=&quot;Type your message here.&quot; id=&quot;message&quot; /&gt;
 &lt;/Field&gt;
 )
}
</code></pre>

<pre class="shiki " style="background-color: #fff" tabindex="0"><code>import { Field } from &quot;@/components/ui/field&quot;
import { Label } from &quot;@/components/ui/label&quot;
import { Textarea } from &quot;@/components/ui/textarea&quot;

export default function TextareaWithText() {
 return (
 &lt;Field&gt;
 &lt;Label htmlFor=&quot;message-2&quot;&gt;Your Message&lt;/Label&gt;
 &lt;Textarea placeholder=&quot;Type your message here.&quot; id=&quot;message-2&quot; /&gt;
 &lt;p className=&quot;text-sm text-muted-foreground&quot;&gt;
 Your message will be copied to the support team.
 &lt;/p&gt;
 &lt;/Field&gt;
 )
}
</code></pre>

<pre class="shiki " style="background-color: #fff" tabindex="0"><code>import * as React from &quot;react&quot;

import { cn } from &quot;@/lib/utils&quot;

export interface TextareaProps
 extends React.TextareaHTMLAttributes&lt;HTMLTextAreaElement&gt; {}

const Textarea = React.forwardRef&lt;HTMLTextAreaElement, TextareaProps&gt;(
 ({ className, ...props }, ref) =&gt; {
 return (
 &lt;textarea
 className={cn(
 &quot;block min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:border-input focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50&quot;,
 className
 )}
 ref={ref}
 {...props}
 /&gt;
 )
 }
)
Textarea.displayName = &quot;Textarea&quot;

export { Textarea }
</code></pre>

Textarea

Installation

Usage

API

Examples

Disabled

With Label

With Text

With Button

Form