# Textarea
> Generated from textarea.contract.json — do not edit by hand.

Enter multi-line free text — descriptions, messages, notes — with autosize and char count, rendered through the shared Textarea.

Tier: **composite-antd**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, dashboard, settings, audience.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | string | `""` | Controlled text value |
| `size` | 'small' | 'middle' | 'large' | `'middle'` | Control height / padding: small 24, default 32, large 40 |
| `status` | 'error' | 'warning' | `—` | Validation state — recolours the border |
| `disabled` | boolean | `false` | Non-interactive; greyed fill |
| `readOnly` | boolean | `false` | Shows value but blocks editing |
| `placeholder` | string | `—` | Empty-state hint (#8A8A8A) |
| `rows` | number | `—` | Fixed visible rows |
| `autoSize` | boolean | { minRows, maxRows } | `false` | Grow with content between bounds |
| `maxLength` | number | `—` | Cap length; pair with showCount |
| `showCount` | boolean | `false` | Show the character counter |
| `onChange` | (e) => void | `—` | Fires on each change; read e.target.value |

## Visual standard (measured)
- Box: radius 8 · 1px #E3E3E3 border · padding 4 11
- Hover: #D3B4FF (purple-30) border
- Focus: brand #6A1EBB border
- Text: Plus Jakarta 14/21; placeholder #8A8A8A
- Sizing: rows or autoSize={{minRows,maxRows}}
- Size: small · default · large (control height 24/32/40)
- Status: error #F5222D · warning #FAAD14 border

## When to use
- **Textarea** — multi-line free text — a description, a message, notes
- **Input** — short single-line text — a name, a title, a search term
- **Select** — one value from a known set — don't make the user type it

Prefer autoSize with a minRows/maxRows band so the field grows with content but never dominates the layout. Pair maxLength with showCount so the limit is visible, not a surprise on submit.