Textarea Component

The Textarea component is a multi-line text input for longer content with support for character counting, auto-resizing, and multiple variants.

Basic Textarea

Textarea with Label

Message

Sizes

Extra Small

Small

Medium (default)

Large

Extra Large

Variants

Outline

Subtle

Flushed

Character Count

With character counter

0 / 200

Autoresize

Auto-resizing textarea

Disabled State

Using Field Component

Usage Example

import { Textarea } from '@/components/ui/textarea';

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

// With character count
<Textarea showCharCount maxLength={200} />

// Auto-resizing
<Textarea autoresize maxH="10lh" />

// Variants
<Textarea variant="outline" />
<Textarea variant="subtle" />
<Textarea variant="flushed" />

// Sizes
<Textarea size="sm" />
<Textarea size="md" />
<Textarea size="lg" />