Textarea

Forms
Input

Multi-line text input for longer form content like descriptions, messages, and comments.

Preview

Simple multi-line text input

Sizes

Three height options: sm, md, and lg

Small (60px min height)

Medium (80px min height)

Large (120px min height)

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

Props

Textarea component API reference

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
classNamestring—Additional CSS classes

Usage

Import and implementation example

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

export default function Example() {
  const [value, setValue] = useState('')

  return (
    <>
      {/* Basic textarea */}
      <div className="space-y-2">
        <Label htmlFor="message">Message</Label>
        <Textarea
          id="message"
          placeholder="Type your message here..."
        />
      </div>

      {/* With character limit */}
      <Textarea
        value={value}
        onChange={(e) => setValue(e.target.value)}
        maxLength={500}
        placeholder="Max 500 characters..."
      />

      {/* Different sizes */}
      <Textarea size="sm" placeholder="Small" />
      <Textarea size="md" placeholder="Medium" />
      <Textarea size="lg" placeholder="Large" />

      {/* Error state */}
      <Textarea variant="error" placeholder="Has error..." />
    </>
  )
}

Features

Built-in functionality

  • Resizable: Vertical resize enabled by default
  • Three sizes: Small (60px), medium (80px), large (120px)
  • Error state: Visual feedback for validation errors
  • Focus ring: Clear focus indicator
  • Smooth transitions: 200ms color transitions
  • Max length: Optional character limit
  • Custom rows: Set visible rows directly
  • Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

Uses native textarea elementProperly labeled via htmlForSupports aria-describedby for errors

Keyboard Navigation

KeyAction
TabFocus the textarea
TypeEnter text content
Shift+TabMove to previous element

Notes

  • Always use with Label for accessibility
  • Error messages should use aria-describedby
  • Placeholder is not a substitute for label
  • Resize handle is keyboard accessible

Related Components

InputRich Text EditorMentions