Textarea

Ready

Multi-line text input for longer form content

Basic Textarea

Simple multi-line text input

Sizes

Different textarea heights

With Character Count

Show character count with max length

0 / 200 characters

Error State

Textarea with validation error

Description is required and must be at least 10 characters

Disabled State

Disabled textarea

Feedback Form Example

Complete form with textarea

Be as detailed as possible to help us improve

Installation

No additional dependencies required

The Textarea component is built using native HTML textarea element with enhanced styling.

Usage

Basic implementation example

import { Textarea } from '@/components/ui/textarea'
import { Label } from '@/components/ui/label'

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="message">Message</Label>
      <Textarea
        id="message"
        placeholder="Type your message here..."
      />
    </div>
  )
}

Props

Textarea component props

PropTypeDefaultDescription
variant'default' | 'error''default'Visual variant
size'sm' | 'md' | 'lg''md'Minimum height
placeholderstring-Placeholder text
rowsnumber-Number of visible rows
maxLengthnumber-Maximum character count
disabledbooleanfalseDisable the textarea

Features

Built-in functionality

  • Resizable - Vertical resize enabled by default
  • 3 sizes - Small (60px), medium (80px), large (120px)
  • Error state - Visual feedback for validation errors
  • Focus ring - Clear focus indicator
  • Smooth transitions - 200ms color transitions
  • 6px border radius - Consistent with Eidetic design