Atom

Textarea

A multi-line text input for longer content. Supports labels, helper text, error states, character count, and resize options.

Overview

The Textarea component provides a multi-line text input for longer content like comments, descriptions, and notes. It includes support for labels, character counting, resize control, and validation states.

Props

Prop Type Default Description
label string - Label text above the textarea
helperText string - Helper text below the textarea
error string - Error message (replaces helper text)
rows number 4 Number of visible text rows
required boolean false Whether the field is required
resize 'none' | 'vertical' | 'horizontal' | 'both' 'vertical' Resize behavior
showCount boolean false Show character count (requires maxLength)
maxLength number - Maximum character limit
disabled boolean false Whether the textarea is disabled

Variants

Resize Options

Control how users can resize the textarea.

 
<Textarea resize="none" placeholder="No resize" />
<Textarea resize="vertical" placeholder="Vertical (default)" />
<Textarea resize="horizontal" placeholder="Horizontal" />
<Textarea resize="both" placeholder="Both directions" />

Row Count

Adjust the visible height with different row counts.

Examples

With Label

 
<Textarea
  label="Description"
  placeholder="Enter a detailed description..."
  rows={4}
/>

With Character Count

Shows remaining characters when showCount and maxLength are set.

0/200
 
<Textarea
  label="Bio"
  placeholder="Tell us about yourself..."
  maxLength={200}
  showCount
  rows={3}
/>

Required Field

 
<Textarea
  label="Feedback"
  placeholder="Your feedback is required"
  required
/>

With Helper Text

Include street, city, state, and zip code
 
<Textarea
  label="Address"
  placeholder="Enter your full address"
  helperText="Include street, city, state, and zip code"
/>

Error State

Comment cannot be empty
 
<Textarea
  label="Comment"
  placeholder="Enter your comment"
  error="Comment cannot be empty"
/>

Disabled State

Accessibility

  • Multiline Role: Uses native <textarea> element which is recognized as a multiline textbox.
  • Label Association: Labels are properly associated with the textarea via htmlFor.
  • Character Count: The character count is announced to screen readers when approaching the limit.
  • Error State: Errors are linked via aria-describedby and aria-invalid is set when errors are present.

Best Practices

  • Use Textarea for multi-line content; use Input for single-line
  • Set a reasonable rows value based on expected content length
  • Use character limits with showCount to guide users
  • Consider disabling horizontal resize on mobile for better UX