Textarea
A multi-line text input field for collecting longer form content.
Overview
The Textarea component is designed for collecting multi-line text input from users. It's ideal for comments, messages, descriptions, and other longer-form content.
Our Textarea component is built with accessibility in mind and follows WAI-ARIA best practices. It supports various states and can be easily customized to fit your design needs.
Basic Usage
The default Textarea component provides a clean, accessible multi-line text input field.
Examples
With Label
Combine the Textarea with a label for better accessibility.
Your message will be sent to our support team.
Textarea States
Textareas can have different states to indicate their current status.
This field is required
Custom Sizes
Customize textarea sizes using Tailwind CSS classes.
With Character Count
Add a character counter to limit and track input length.
0/500 characters
With Button
Combine textarea with buttons for comment forms, feedback forms, and more.
API Reference
The Textarea component extends the HTML textarea element with additional styling.
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | undefined | Placeholder text for the textarea. |
| disabled | boolean | false | When true, the textarea will be disabled. |
| readOnly | boolean | false | When true, the textarea will be read-only. |
| rows | number | 3 | The number of visible text lines. |
| className | string | undefined | Additional CSS classes to add to the textarea. |
The Textarea component also accepts all the props of the HTML textarea element.
Accessibility
The Textarea component follows accessibility best practices to ensure usability for all users:
Proper Labeling
Always associate textareas with labels using the htmlFor attribute or by nesting textareas within label elements.
Focus States
Clearly visible focus states are provided for keyboard navigation.
Error Messaging
Use aria-invalid and aria-describedby to connect textareas with error messages.
Resizing
By default, textareas can be resized by users, which is important for accessibility. Only restrict resizing when absolutely necessary.
Accessibility Tip
For longer forms, consider providing clear instructions above the textarea and feedback about the remaining character count. This helps users understand constraints and expectations before they start typing.
Best Practices
Follow these guidelines to ensure effective use of the Textarea component:
Textarea Design
Do
- Provide clear, descriptive labels
- Set an appropriate initial size
- Allow resizing when possible
- Indicate character limits visually
- Show helpful placeholder text
Don't
- Make textareas too small for their expected content
- Disable resizing without good reason
- Use placeholder text as the only label
- Set unnecessarily restrictive character limits
- Hide validation errors until form submission
Form Layout
Do
- Place textareas below their labels
- Group related form elements together
- Provide clear submission buttons
- Show character count for limited fields
- Maintain consistent spacing between form elements
Don't
- Place labels far from their textareas
- Use inconsistent layouts within the same form
- Hide important helper text or instructions
- Make textareas wider than their container
- Use fixed heights that don't accommodate content