表单组件版本 0.1.0

Textarea 文本域

录入备注、描述或反馈等需要换行的较长自由文本。

使用概览

适合使用

  • 内容可能超过一行且用户需要查看段落结构时。

不建议使用

  • 只需短值、结构化字段或富文本格式编辑时。

真实示例

实施说明文本域

允许输入最多五百字的多行说明。

正在加载示例…

安装

本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/textarea.json

基础用法

导入

import { Textarea } from "@richardqiu/quartz/textarea";

JSX

<Textarea name="notes" rows={4} placeholder="补充实施说明" maxLength={500} />

状态与控制摘要

默认
键盘焦点可见
已禁用
无效
只读
label · textactive · boolean

API 参考

属性类型默认值说明
rowsnumber2设置文本域初始可见的行数。

组合结构

  1. 01Textarea

键盘约定

  • Tab 聚焦文本域,Enter 插入换行,其他编辑键保持原生行为。

可访问性契约

  • 提供可见标签,并在语义上区分禁用与只读状态。
  • 帮助和错误信息通过 Field 声明的 ID 与文本域关联。