多行输入 Textarea
较长的文本:业务描述、备注、驳回原因。
examples/textarea/basic.html
html
min-h-24 w-full resize-y rounded-lg border border-input bg-background px-3.5 py-2.5 text-sm leading-relaxed text-foreground …焦点、禁用、错误状态的类名与输入框相同。
使用建议
推荐
- 用
rows设置合理的初始高度(3–5 行),允许用户纵向拉伸(resize-y) - 有字数限制时加
maxlength,并在提示中写明
避免
- 禁止拉伸(
resize-none),除非容器高度确实固定
无障碍
- 与输入框相同:
label[for]关联、提示用aria-describedby
与 v2 的差异
| v2 现状 | 规范 |
|---|---|
| 行高默认,长文本拥挤 | 加 leading-relaxed |
| 没有最小高度 | min-h-24(96px) |