Text Area
A multi-line text input component with support for character counting, validation states, and flexible sizing options.
Basic Text Area
With Helper Text
This will be displayed on your public profile.
Character Count
Maximum 280 characters
0 / 280
Validation States
Description must be at least 50 characters
Resize Options
Rows Variants
States
This field is required
Props
| Name | Type | Default | Description |
|---|---|---|---|
label* | string | - | Textarea label text |
placeholder | string | - | Placeholder text |
value | string | - | Controlled value |
defaultValue | string | - | Uncontrolled default value |
disabled | boolean | false | Whether textarea is disabled |
required | boolean | false | Whether textarea is required (shows * indicator) |
error | string | - | Error message to display |
helperText | string | - | Helper text below textarea |
showValidIcon | boolean | true | Show check icon when valid |
showErrorIcon | boolean | true | Show X icon when error |
maxLength | number | - | Maximum character length |
showCharCount | boolean | true | Show character count (requires maxLength) |
rows | number | 4 | Number of visible text rows |
resize | 'none' | 'vertical' | 'horizontal' | 'both' | 'vertical' | Resize behavior |
onChange | (e: ChangeEvent<HTMLTextAreaElement>) => void | - | Change event handler |
Usage Guidelines
When to use
- •For collecting multi-line text input like comments, descriptions, or feedback
- •When users need to enter more than a single line of text
- •For form fields that require detailed responses
- •When character limits need to be enforced (use maxLength and showCharCount)
Best practices
- •Use clear, descriptive labels that indicate what content is expected
- •Set appropriate row height based on expected content length
- •Show character count when there's a maximum length limit
- •Use helper text to provide guidance on expected format or content
- •Enable vertical resize for flexibility, or disable resize for fixed layouts
- •Display validation feedback inline with clear error messages
Accessibility
- •Keyboard accessible (Tab, Shift+Tab for navigation)
- •ARIA attributes: aria-invalid, aria-describedby, aria-required
- •Error messages announced with aria-live="polite"
- •Focus indicators visible (2px ring)
- •Label properly associated with textarea
- •Required fields indicated with * and aria-required
- •Character count updates announced to screen readers
Do's and Don'ts
✓ Do
- •Provide clear labels and helpful placeholder text
- •Show character count for fields with length limits
- •Set appropriate row height for expected content
- •Use helper text to guide users on format or requirements
- •Show inline validation with clear error messages
Help us improve by sharing your experience
0 / 500
✗ Don't
- •Don't use text area for single-line input - use Input instead
- •Don't make the textarea too small for expected content
- •Don't hide character limits - show count when maxLength is set
- •Don't use vague labels like "Text" or "Input"
- •Don't disable resize without good reason