TextArea
多行文本录入框，支持计数（maxCount/字素）、清除、校验态、IME 与 autosize 自适应高度（minRows/maxRows）。
如何引入
import { TextArea } from '@chenzy-design/svelte';基本用法
通过 bind:value 双向绑定输入值，并支持 placeholder 占位提示。
尺寸
提供 large / default / small 三种尺寸。
状态
支持禁用、warning、error 等状态。
功能
可清除、字数统计 + 长度限制、密码输入等功能。
0/20
输入组合
InputGroup 把多个输入控件拼接为一体（相邻边框合并、首尾圆角），size 经 context 回退统一透传。
价格区间
前后缀
prefix / suffix 在输入框内渲染前后缀内容（图标、单位等）。
🔍
¥ 元
前后置标签
addonBefore / addonAfter 在输入框外拼接前置/后置标签（如协议、域名后缀）。
https:// .com
用户名
受控
value 完全由外部持有，配合 onChange，可编程式设置。
自定义计数
getValueLength 自定义字符计数（emoji 按可见长度计），配合 showCount / maxLength。
0/10
自定义计数 0 · 原生 length 0输入法模式
composition 开启后，输入法未确认期间不触发 onChange，确认后触发一次。
API 参考
TextArea
Props
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 受控值；提供则为受控 | string | undefined |
defaultValue | 非受控初始值 | string | '' |
size | — | 'small'|'default'|'large' | default |
disabled | — | boolean | false |
readonly | — | boolean | false |
placeholder | — | string | undefined |
showCount | 显示字符计数 | boolean | false |
maxLength | 原生硬性长度限制（截断输入） | number | undefined |
maxCount | 计数上限（计数展示与超限提示，不截断） | number | undefined |
countGraphemes | 按视觉字符（Intl.Segmenter 字素）计数而非 code point，正确处理 emoji/组合字符 | boolean | false |
showClear | 显示清除按钮（非空且非禁用/只读） | boolean | false |
autoFocus | 挂载后自动聚焦 | boolean | false |
status | 校验态 | 'default'|'warning'|'error' | default |
validateStatus | Form 注入别名，等价 status（仅当未显式传 status 时生效） | 'default'|'warning'|'error' | undefined |
rows | — | number | 3 |
autosize | 随内容自适应高度 | boolean | { minRows?: number; maxRows?: number } | false |
resize | 原生手动调整把手（autosize 时强制 none） | 'none'|'vertical'|'both' | 'none' |
name | — | string | undefined |
id | — | string | undefined |
class | 透传根类名 | string | '' |
ariaLabel | — | string | undefined |
ariaDescribedby | — | string | undefined |
onChange | — | (v: string) => void | undefined |
onInput | — | (v: string) => void | undefined |
onClear | 点击清除按钮 | () => void | undefined |
onFocus | 获得焦点 | (e: FocusEvent) => void | undefined |
onBlur | 失去焦点 | (e: FocusEvent) => void | undefined |
onEnterPress | 按下 Enter（含修饰键信息，供 Ctrl+Enter 提交） | (p: { value: string; event: KeyboardEvent }) => void | undefined |
onResize | autosize 高度变化 | (p: { height: number }) => void | undefined |
onCompositionStart | IME 开始 | (e: CompositionEvent) => void | undefined |
onCompositionEnd | IME 结束 | (e: CompositionEvent) => void | undefined |
Slots
| 名称 | 说明 |
|---|---|
count | 自定义计数器渲染（覆盖内建） |
clearIcon | 自定义清除图标 |
Accessibility
| ARIA role | textbox |
- 原生 textarea
- error 时 aria-invalid
- IME composition 安全
- 超限经 aria-live=polite 播报
- 清除按钮可 Tab 到达，aria-label 来自 i18n
设计变量
| 变量 | 默认值 | 用法 |
|---|---|---|
--cd-transition-delay-input-bg | var(--cd-motion-delay-none) | 输入框-背景色-延迟时间 |
--cd-transition-delay-input-border | var(--cd-motion-delay-none) | 输入框-边框-延迟时间 |
--cd-transition-delay-input-text | var(--cd-motion-delay-none) | 输入框-文字或图标-延迟时间 |
--cd-transition-duration-input-bg | var(--cd-motion-duration-none) | 输入框-背景色-动画持续时间 |
--cd-transition-duration-input-border | var(--cd-motion-duration-none) | 输入框-边框-动画持续时间 |
--cd-transition-duration-input-text | var(--cd-motion-duration-none) | 输入框-文字或图标-动画持续时间 |
--cd-transition-function-input-bg | var(--cd-motion-ease-in) | 输入框-背景色-过渡曲线 |
--cd-transition-function-input-border | var(--cd-motion-ease-in) | 输入框-边框-过渡曲线 |
--cd-transition-function-input-text | var(--cd-motion-ease-in) | 输入框-文字或图标-过渡曲线 |