Textarea

Textarea

Textarea provides multi-line text input with support for character limits, validation, and length display.

Visual Specifications

Property	Value
Min-height	80-120px
Border Width	1px
Corner Radius	4px
Padding	12-16px
Font Size	14-16px
Line Height	1.5
Resize	Vertical (optional)

States

Default Focus Error Disabled

Grey40 border, normal state

Brand color border, active input

Red border, validation failed

Grey with reduced opacity, not interactive

Size Variants

Rows	Usage
3 rows	Short responses
4-5 rows	Standard textarea
6-8 rows	Longer content
10+ rows	Extended input

Character Count Display

Format: “X / Y characters”

State	Display
Under limit	”45 / 500 characters”
At limit	”500 / 500 characters”
Over limit	Error message shown

Usage Guidance

When to use

• Multi-line text input (addresses, descriptions)
• Comments or feedback fields
• Longer form responses
• When user needs to enter paragraphs

Best practices

✅ Do	❌ Don’t
Set appropriate default row count	Use for single-line input (use input)
Use maxlength for bounded input	Set arbitrary small limits
Show remaining characters	Hide character count
Provide clear labels	Make required fields unclear