Textarea

A multi-line text input component for user-provided data entry.

Variants

Default

<Textarea placeholder="Enter text..." />

Ghost

<Textarea variant="ghost" placeholder="Ghost variant..." />

With Label

use htmlFor for accessibility with label

<div className="w-full space-y-1">
  <label htmlFor="with-label">
    Description
  </label>
  <Textarea id="with-label" placeholder="Enter a description..." />
</div>

Sizes

Small (sm)

<Textarea size="sm" placeholder="Small size..." />

Medium (md)

<Textarea size="md" placeholder="Medium size..." />

Fitted

Not Fitted (Default)

<Textarea fitted={false} placeholder="Not fitted (default)..." />

Fitted

<Textarea fitted={true} placeholder="Fitted..." />

States

Disabled

<Textarea disabled={true} placeholder="Disabled textarea..." />

With Rows

<Textarea rows={6} placeholder="Custom height with rows..." />