## Textarea
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.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings, audience.
Props:
- value: string, default "". Controlled text value
- size: 'small' | 'middle' | 'large', default 'middle'. Control height / padding: small 24, default 32, large 40
- status: 'error' | 'warning', default —. Validation state — recolours the border
- disabled: boolean, default false. Non-interactive; greyed fill
- readOnly: boolean, default false. Shows value but blocks editing
- placeholder: string, default —. Empty-state hint (#8A8A8A)
- rows: number, default —. Fixed visible rows
- autoSize: boolean | { minRows, maxRows }, default false. Grow with content between bounds
- maxLength: number, default —. Cap length; pair with showCount
- showCount: boolean, default false. Show the character counter
- onChange: (e) => void, default —. Fires on each change; read e.target.value
Tokens: colorPrimary, borderRadius, colorBorder, colorTextPlaceholder, Input.activeBorderColor, Input.hoverBorderColor.
Use when: 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).