Textarea

View in Storybook

Explore interactive examples and all component variations in our Storybook.

The Textarea component provides a multi-line text input with consistent styling and accessibility features. Built with proper focus management and responsive design, it's perfect for comments, descriptions, messages, and any multi-line text input needs.

Basic Usage

View in Storybook

With Label

Message

Different Sizes

Small (3 rows)

Medium (5 rows)

Large (8 rows)

Controlled Textarea

Description

Characters: 0/200200 remaining

Disabled State

Disabled (Empty)

Disabled (With Value)This textarea is disabled and contains some text that cannot be edited.

Form Integration

Feedback Form

Your Feedback

Additional Comments

Auto-Resize Textarea

Auto-Resize Textarea

This textarea automatically adjusts its height based on content.

Properties

Textarea

Property	Type	Description
value	string	The controlled value of the textarea.
defaultValue	string	The default value (uncontrolled).
onChange	(event: ChangeEvent<HTMLTextAreaElement>) => void	Callback fired when the value changes.
placeholder	string	Placeholder text displayed when empty.
disabled	boolean	Whether the textarea is disabled.
required	boolean	Whether the textarea is required in forms.
readOnly	boolean	Whether the textarea is read-only.
rows	number	Number of visible text lines.
cols	number	Number of visible character columns.
maxLength	number	Maximum number of characters allowed.
minLength	number	Minimum number of characters required.
wrap	"hard" | "soft" | "off"	How text wrapping should be handled.
resize	"none" | "both" | "horizontal" | "vertical"	CSS resize property.
className	string	Additional CSS classes for the textarea.
id	string	HTML id attribute.
name	string	HTML name attribute for forms.
autoFocus	boolean	Whether to focus the textarea on mount.
onFocus	(event: FocusEvent<HTMLTextAreaElement>) => void	Callback fired when focused.
onBlur	(event: FocusEvent<HTMLTextAreaElement>) => void	Callback fired when blurred.

Accessibility

The Textarea component includes comprehensive accessibility features:

• Keyboard Navigation - Standard textarea keyboard interactions
• Focus Management - Proper focus indicators and handling
• Screen Reader Support - Works with assistive technologies
• Label Association - Proper labeling with htmlFor/id attributes
• Form Integration - Seamless integration with form libraries
• ARIA Support - Can be enhanced with ARIA attributes
• Validation States - Supports required, invalid, and other states

Common Use Cases

The Textarea component is perfect for:

• Comments - User comments and feedback forms
• Descriptions - Product descriptions and detailed information
• Messages - Contact forms and messaging interfaces
• Notes - User notes and documentation
• Reviews - Product reviews and testimonials
• Content Creation - Blog posts and article content
• Code Input - Code snippets and configuration
• Addresses - Multi-line address inputs

Best Practices

1. Appropriate Sizing - Set reasonable default rows for content type
2. Character Limits - Implement and display character count when needed
3. Placeholder Text - Use helpful placeholder text to guide users
4. Validation - Provide clear validation feedback for required fields
5. Auto-Resize - Consider auto-resize for dynamic content
6. Accessibility - Always associate with labels and provide context
7. Performance - Debounce onChange handlers for expensive operations
8. Mobile Optimization - Ensure proper mobile keyboard and sizing