Textarea
A Textarea component is an input field that allows users to enter multi-line text. It provides a larger area for text input compared to a standard text input field, making it ideal for comments, feedback, or any scenario where users need to provide detailed information. Textareas can be resized, styled, and configured to support features like character limits, placeholders, and auto-resizing to enhance user experience.
# Demo
Basic Textarea
Simple textarea for collecting multi-line text input with labels and placeholders.
Textarea Sizes
Different textarea sizes for various content types and space requirements.
Disabled Textarea
Textarea in disabled state to show read-only or unavailable content.
Textarea with Character Limit
Textarea with character counting and limit enforcement for controlled input.
0/200 characters200 remaining
Auto-resize Textarea
Textarea that automatically adjusts height based on content length.
Textarea with Validation
Textarea with real-time validation feedback and visual state indicators.
Enter your text here.
Code Textarea
Monospace textarea for code input with syntax-friendly formatting.
3 lines
Form Example
Complete form with multiple textareas for different types of content input.
Custom Styled Textareas
Textareas with different styling themes and visual treatments.
Textarea Best Practices
✅ Do's
- • Provide clear labels and placeholders
- • Set appropriate default sizes (rows)
- • Include character limits when necessary
- • Provide real-time validation feedback
- • Use monospace fonts for code input
- • Allow resizing when appropriate
- • Include helpful helper text
- • Make textareas accessible with proper ARIA labels
❌ Don'ts
- • Don't make textareas too small for content
- • Don't forget to handle long text gracefully
- • Don't use textareas for single-line input
- • Don't ignore mobile usability
- • Don't forget to validate user input
- • Don't disable resize without good reason
- • Don't use unclear or missing labels
- • Don't ignore keyboard navigation
Textarea State Summary
Current Textarea States
Character Counts
Address:16 chars
Message:0 chars
Review:0 chars
Code:52 chars
Form Data
Title:0 chars
Content:0 chars
Tags:0 chars
Summary:0 chars
# Usage
# Attributes
| Name | Type | Default | Details |
|---|---|---|---|
| id | string | Optional | You can pass id to create unique identifier. |
| label | React.ReactNode | Optional | Label for the textarea. |
| labelClassName | string | ' ' | You can customise by passing tailwind classes. |
| textareaClassName | string | ' ' | You can customise by passing tailwind classes. |
| className | string | ' ' | You can customise by passing tailwind classes. |
| error | React.ReactNode | Optional | Error message to display. |
| helperText | React.ReactNode | Optional | Helper text to display. |
| onChange | (e: React.ChangeEvent<HTMLTextAreaElement>) => void | Optional | Change event handler. |
# Tags