Textarea
Textarea
Textarea provides multi-line text input with support for character limits, validation, and length display.
Visual Specifications
Section titled “Visual Specifications”| Property | Value |
|---|---|
| Min-height | 80-120px |
| Border Width | 1px |
| Corner Radius | 12px (rounded-xl) |
| Padding | 12-16px |
| Font Size | 14px (text-f-14) |
| Line Height | 6 (24px) |
| Scrollbar | Custom webkit-scrollbar (6px width) |
States
Section titled “States”Grey40 border, normal state with optional header/footer length indicator.
Input with reset icon (config.isReset) to clear content.
Configuration Options
Section titled “Configuration Options”| Option | Type | Description |
|---|---|---|
required | boolean | Adds red asterisk |
maxlength | number | Hard limit for input |
showInputLength | boolean | Shows length counter in header |
showBottomLength | boolean | Shows length counter in footer |
isReset | boolean | Enables reset button |
resetIcon | string | URL for reset icon |
fieldClasses | string | Custom tailwind classes for field |
Character Count Display
Section titled “Character Count Display”Counters can be placed in two locations:
- Header: Top-right corner (via
showInputLength) - Footer: Bottom-right corner (via
showBottomLength)
Format: Value / Max (e.g., 0/500)
Usage Guidance
Section titled “Usage Guidance”When to use
Section titled “When to use”- Multi-line text input (addresses, descriptions)
- Comments or feedback fields
- Longer form responses
- When user needs to enter paragraphs
Best practices
Section titled “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 |