组件 · 表单 · 原生 HTML 与 React
字段 Field
标签 + 输入框 + 说明 / 错误:表单的一行。
演示
最多 100 个字
最多 100 个字
请输入有效的邮箱地址
<div class="xxd-field">
<label class="xxd-label" for="title">标题</label>
<input class="xxd-input" id="title" placeholder="给这篇文章起个名字">
<p class="xxd-help">最多 100 个字</p>
</div>export function FieldDemo() {
return (
<div className="grid w-72 gap-4">
<Input label="标题" placeholder="给这篇文章起个名字" description="最多 100 个字" />
<Input label="邮箱" defaultValue="not-an-email" error="请输入有效的邮箱地址" />
</div>
);
}状态
同一个元素的各种状态并排。悬停、聚焦、按下用的是组件 CSS 里真实的规则(构建时复制成强制状态),不是手画的。
默认
悬停
键盘聚焦
禁用
出错
只读
属性与类名
| 属性 / 类名 | 说明 |
|---|---|
| aria-invalid | 出错时边框变危险色 |
| data-optional | 在 label 上:后面加「可选」 |
| data-autosize | textarea 随内容长高 |
| 类名 | xxd-field xxd-label xxd-help xxd-error xxd-input xxd-textarea |
键盘与读屏
- label 的 for 指向输入框;说明和错误用 aria-describedby 连上
- 出错时输入框写 aria-invalid="true",错误文字写清楚怎么改,不只变红
规则
- 一个框只有一个框:聚焦时边框变深一次,不加外圈和内框
- §4