TextArea Component

A multi-line text input component with character count, validation states, and auto-resize support. Perfect for comments, descriptions, and longer text inputs.

Basic TextArea

Description

<TextArea placeholder="Enter your message..." />
<TextArea label="Description" placeholder="Describe your post..." />

Different Sizes

Small (2 rows)

Default (4 rows)

Large (8 rows)

<TextArea label="Small (2 rows)" rows={2} placeholder="Small textarea..." />
<TextArea label="Default (4 rows)" rows={4} placeholder="Default size..." />
<TextArea label="Large (8 rows)" rows={8} placeholder="Large textarea..." />

With Character Count

Bio

Write a short bio for your profile

0/150

0/280

<TextArea 
  label="Bio" 
  placeholder="Tell us about yourself..."
  maxLength={150}
  helperText="Write a short bio for your profile"
/>
<TextArea 
  label="Tweet" 
  placeholder="What's happening?"
  maxLength={280}
  defaultValue="Sample text..."
/>

Required Fields

Feedback*

Your feedback helps us improve

<TextArea 
  label="Feedback" 
  required 
  placeholder="Please share your feedback..."
  helperText="Your feedback helps us improve"
/>

Error States

Comment

Comment cannot be empty

Description

Description is too long

0/100

<TextArea 
  label="Comment" 
  error="Comment cannot be empty"
  placeholder="Add a comment..."
/>
<TextArea 
  label="Description" 
  maxLength={100}
  defaultValue="Long text..."
  error="Description is too long"
  helperText="Keep it under 100 characters"
/>

Disabled State

Disabled TextArea

Disabled with Character Count

0/100

<TextArea 
  label="Disabled TextArea" 
  disabled 
  defaultValue="This textarea is disabled and cannot be edited" 
/>
<TextArea 
  label="Disabled with Character Count" 
  disabled 
  maxLength={100}
  defaultValue="Even with a character limit, this is disabled"
/>

Complete Example

Post Caption*

Add a catchy caption to engage your audience

0/500

<TextArea 
  label="Post Caption" 
  required
  rows={3}
  maxLength={500}
  placeholder="Write a caption for your post..."
  helperText="Add a catchy caption to engage your audience"
  class="resize-none"
/>

Props Reference

Prop	Type	Default	Description
label	string	undefined	Label text displayed above the textarea
error	string	undefined	Error message to display
helperText	string	undefined	Helper text displayed below the textarea
maxLength	number	undefined	Maximum character limit with counter
rows	number	4	Number of visible text rows
required	boolean	false	Whether the field is required
disabled	boolean	false	Whether the textarea is disabled
className	string	undefined	Additional CSS classes