Inputs/Textarea

Textarea

Displays a form textarea or a component that looks like a textarea.

Themed

When to Use

Use the Textarea component when you need to:

  • Collect multi-line text input (comments, descriptions, messages)
  • Allow users to write longer form content (bios, reviews, feedback)
  • Create note-taking or journaling interfaces
  • Build chat or messaging input areas
  • Capture any text that may span multiple lines

When Not to Use

  • Single-line text entry - use Input instead
  • Rich text editing with formatting - use a rich text editor
  • Code editing with syntax highlighting - use a code editor component
  • Markdown editing with preview - use a markdown editor

Default

A simple textarea with placeholder text.

Disabled

Disabled textarea that prevents user interaction.

With Label

Textarea paired with a label for better accessibility.

With Text

Textarea with a label and helper text below.

Your message will be copied to the support team.

With Button

Textarea combined with a submit button.

States

Different textarea states for various UI feedback scenarios.

Form Example

Textarea in a complete form layout with other inputs.

UX & Design Guidelines

Visual Hierarchy

Always pair textareas with Label components above. Use placeholder text for format hints, not instructions. Consider showing character counts for length-limited fields.

Spacing & Layout

Default minimum height is min-h-16 (4 lines). Use min-h-[120px] for taller textareas. Component uses field-sizing-content for auto-resize behavior. Constrain width with max-w-sm or max-w-md.

Responsive Behavior

Textareas adapt to mobile (320px+) by using full width on small screens. Touch targets meet the minimum 44px height requirement. Auto-resize works well on all devices for variable content length.

Color & Contrast

All states meet WCAG 2.1 AA contrast requirements. Error states use destructive color with aria-invalid. Focus rings use ring-2 ring-ring for clear visibility.

Accessibility

Keyboard Navigation

  • Tab — Focus next element
  • Shift + Tab — Focus previous element
  • Enter — Insert new line (does not submit form)
  • Arrow keys — Navigate within text
  • Ctrl/Cmd + A — Select all text

Screen Reader Support

  • Announces as "text area" with current content
  • Labels are properly associated via htmlFor attribute
  • Error messages linked with aria-describedby
  • Required fields announced via required attribute
  • Disabled and read-only states properly announced

Focus Management

Visible focus indicator with 2px ring using focus-visible:ring-2. Focus state meets WCAG 2.1 Level AA requirements with 3:1 contrast ratio.

ARIA Attributes

Related Components

Input

Single-line text input for shorter content like names, emails, and search

Input Group

Combine textareas with icons, buttons, or other elements

Label

Accessible labels that should always accompany textareas

Form

Form wrapper with validation using react-hook-form and zod

API Reference

The Textarea component accepts all standard HTML textarea attributes plus these common props.

PropTypeDefaultDescription
placeholderstring—Placeholder text displayed when the textarea is empty.
valuestring—The controlled value of the textarea.
defaultValuestring—The default value for uncontrolled usage.
disabledbooleanfalseWhen true, prevents user interaction.
readOnlybooleanfalseWhen true, the textarea value cannot be modified.
requiredbooleanfalseWhen true, the textarea must have a value for form submission.
rowsnumber—The visible number of text lines.
aria-invalidbooleanfalseWhen true, displays error styling.
classNamestring—Additional CSS classes to apply.