Textarea
Multi-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.