表单 · 3 / 21
Textarea st-textarea
多行输入框，与 st-input 同一套语义与材质。高度由 rows、autosize 或原生 height 决定；value 是运行时状态，字符统计与受控回显都走页面 data。
两种 variant 与初始值
outlined 与 filled 的区别只在边框和底色。多行内容用 default-value 预填，换行会原样进入内部 textarea；拖拽手柄默认关闭，高度由 rows 控制而不是用户拖拽。
LIVE
st-textarea
outlined
filled + 多行初始值
示例代码
<st-textarea rows="3" placeholder="写点什么……"></st-textarea>
<st-textarea variant="filled" rows="3"
default-value="第一行
第二行
第三行"></st-textarea>rows 与固定高度
rows 转发给内部 textarea，行高为 1.7em；它是可见行数，不是最大行数。需要精确高度时直接写 height，宽高都接受任何原生长度单位。
LIVE
rows / height
rows=2
rows=6
height: 140px
示例代码
<st-textarea rows="2" placeholder="两行高度"></st-textarea>
<st-textarea rows="6" placeholder="六行高度"></st-textarea>
<st-textarea style="height: 140px;" placeholder="固定高度"></st-textarea>autosize 自适应高度
加上 autosize 后高度跟随内容撑开，此时 rows 变成最小高度。输入、程序改值、外部字号变化都会重新计算；不需要再手写 scrollHeight 逻辑。
LIVE
autosize
空内容，rows=2 为最小高度
预置三行，初始即撑开
示例代码
<st-textarea autosize rows="2"
placeholder="输入回车换行，高度自动增长"></st-textarea>disabled / readonly / color
disabled 阻断聚焦和输入并降到 0.38 透明度；readonly 仍可聚焦、可复制。错误态与成功态用 color 表达，聚焦时描边 / 底线和 caret 使用对应角色色。
LIVE
disabled / readonly / color
disabled
readonly
color="error"
color="success"
示例代码
<st-textarea default-value="不可编辑" disabled></st-textarea>
<st-textarea default-value="只读内容" readonly></st-textarea>
<st-textarea color="error" default-value="这段内容不合法"></st-textarea>受控值与字数统计
用 sync:value 双向绑定 data，再在 on:input 里更新字数，就能做实时统计。程序改值同样走 data：填入模板和清空都不需要直接操作内部 textarea。
LIVE
:value / on:input示例代码（字数统计）
<st-textarea sync:value="draft" on:input="onDraft"></st-textarea>
<span>字数统计</span>
<script>
export default async () => ({
data: { draft: "", charCount: 0 },
proto: {
onDraft(e) {
this.charCount = e.target.value.length;
},
},
});
</script>字号缩放与圆角
与 input 一样，默认尺寸都用 em。只改宿主的 font-size，内边距、行高、圆角会一起缩放；单独覆写 width / border-radius 也可以。
LIVE
font-size / width / radius
12px
16px
width + 圆角
示例代码
<st-textarea style="font-size: 12px;" rows="2"></st-textarea>
<st-textarea style="font-size: 16px;" rows="2"></st-textarea>
<st-textarea style="border-radius: 1em;"></st-textarea>属性
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
variant | "outlined" | "filled" | "outlined" | M3 两种输入框类型 |
rows | number | 3 | 可见行数；autosize 时是最小高度 |
autosize | boolean | 无 | 高度随内容自动撑开，隐藏拖拽手柄 |
default-value | string | 无 | 初始值；attached 时读取一次 |
placeholder | string | 无 | 占位文本 |
color | M3 角色名 / 自定义变量名 | 无 | caret 与 focus 描边 / 底线色 |
disabled | boolean | 无 | 0.38 透明度，阻断聚焦与输入 |
readonly | boolean | 无 | 可聚焦、不可修改 |
插槽 / 事件 / 注意
- 没有图标插槽；需要前缀信息时在组件外布局。
- 事件：
input/change；change 由组件转发为 composed。 - 方法：
focus()/blur()；焦点在内部原生 textarea 上。 value是运行时 property：ofa 页面用sync:value双向绑定，纯 JS 用el.value读写；初始值用default-value。autosize下rows只是最小高度；拖拽手柄默认关闭。