Textarea

Multi-line text input component for longer content. Supports vertical resizing, configurable rows, and all standard form states.

Component Props

Prop	Type	Default	Description
`name`	string	required	Input name attribute
`value`	string	''	Bound value
`placeholder`	string	''	Placeholder text
`rows`	int	3	Number of visible text rows
`state`	string	'default'	Visual state: default, error, success, disabled
`ariaDescribedby`	string	null	ID of helper/error text element
`class`	string	''	Additional wrapper classes

States

Default

Description

Standard textarea with neutral styling

Error

Message

Message must be at least 20 characters

Success

Feedback

Feedback looks good

Disabled

Notes

This field cannot be edited

Row Sizes

Small (3 rows)

Short Note

Medium (5 rows)

Comment

Large (8 rows)

Detailed Description

Real-World Examples

Contact Form Message

Your Message

Please provide as much detail as possible

User Feedback

Share Your Experience

Your feedback helps us improve

Incident Report

Incident Details

Include date, time, and location if relevant

Additional Notes

Notes

Usage Example

Basic Usage

<x-building-blocks.textarea
    name="description"
    placeholder="Enter description..."
    rows="4"
/>

With Error State

<x-building-blocks.textarea
    name="message"
    value=""
    state="error"
    rows="5"
    ariaDescribedby="message-error"
/>
<p id="message-error" class="text-error-600">
    Message is required
</p>

With Helper Text

<x-building-blocks.textarea
    name="feedback"
    placeholder="Share your thoughts..."
    rows="6"
    ariaDescribedby="feedback-help"
/>
<p id="feedback-help" class="text-neutral-500">
    Your feedback helps us improve the app
</p>

Key Features

Vertical Resize: Users can resize vertically to see more content
Configurable Rows: Set initial height with rows prop (default: 3)
Consistent States: Same state system as other form inputs
Full Width: Automatically expands to container width
Trauma-Informed: Clear, supportive validation messaging
WCAG 2.1 AA: Fully accessible with proper ARIA attributes

Best Practices

Do:

Set appropriate row count based on expected content length
Provide clear labels and helper text for context
Allow vertical resizing for user flexibility
Use placeholder text to show format examples
Consider character limits with visible counters for long-form content
Provide validation feedback after user interaction

Don't:

Don't use textarea for single-line input (use input-text instead)
Don't disable resize completely (users may need more space)
Don't set rows too small (minimum 3 for readability)
Don't validate on every keystroke (wait for blur or submit)
Don't use red-only error indicators (use icons + text)
Don't make textareas too wide (max-width for readability)

Accessibility Features

ARIA Support: Proper aria-describedby for helper/error text, aria-invalid for error states
Keyboard Navigation: Full keyboard support with Tab, Shift+Tab, and arrow keys
Focus Indicators: Clear focus ring for keyboard users
Screen Reader Compatible: Proper labeling and state announcements
Resizable: Users can adjust height for better visibility