Copy page

Textarea

A multiline text input component for forms and user input.

Import

Code
import { Textarea } from "zudoku/ui/Textarea";

Basic Usage

Code
<Textarea placeholder="Type your message here." />

With Label

Code
<div className="grid w-full gap-1.5">
  <Label htmlFor="message">Your message</Label>
  <Textarea placeholder="Type your message here." id="message" />
</div>

With Text

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

Disabled State

Code
<Textarea disabled placeholder="Disabled textarea" />

Custom Height

Code
<Textarea className="min-h-[150px]" placeholder="Taller textarea" />

Custom Styling

The Textarea component accepts all standard textarea HTML attributes and can be customized with additional className:

Code
<Textarea className="resize-none" placeholder="Non-resizable textarea" />