Textarea
View on StorybookStorybookMulti-line text input for longer content. Supports auto-resize, character counting, and full RTL support with proper text alignment.
Preview
Installation
Usage
Examples
With Label
Custom Height & Resize
With Character Count
0 / 200
Disabled and Read-only
With Validation
Auto-expanding
Height adjusts automatically as you type
In Forms
Props
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | undefined | Placeholder text shown when textarea is empty |
disabled | boolean | false | Disables the textarea |
readOnly | boolean | false | Makes the textarea read-only |
required | boolean | false | Marks the textarea as required |
rows | number | undefined | Number of visible text rows |
maxLength | number | undefined | Maximum number of characters allowed |
className | string | undefined | Additional CSS classes to apply |
The Textarea component extends all standard HTML textarea attributes including value, onChange, onBlur, and more.
Accessibility
Always Use Labels
Always pair textareas with labels using the htmlFor attribute. This is essential for screen readers and improves usability.
Placeholder Text
Don't rely solely on placeholder text for instructions. Use labels and helper text. Placeholders disappear when typing.
Error Messages
Associate error messages with textareas using aria-describedby:
Character Limits
When using maxLength, provide visual feedback about the character count so users know how much space they have.
RTL Considerations
Textareas automatically support RTL text direction. Text alignment and scrollbar position adapt based on the text direction.
LTR (English)
RTL (العربية)
Use Cases
Comments and feedback forms
Bio and description fields
Notes and message composition
Code or content editing areas
Best Practices
Do
- ✓ Set appropriate min/max rows for the content type
- ✓ Show character count when there's a limit
- ✓ Allow resizing when content length varies
Don't
- ✗ Don't use for single-line input — use Input instead
- ✗ Don't disable resize without good reason
- ✗ Don't set very small textareas for long-form content