Label 标签
为表单控件提供可点击且可访问的明确文字名称。
使用概览
适合使用
- 输入、选择或开关控件需要稳定的可见名称时。
不建议使用
- 文字只是说明内容,或没有实际可关联的表单控件时。
真实示例
工作区名称标签
通过控件标识关联可见字段名称。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/label.json基础用法
导入
import { Label } from "@richardqiu/quartz/label";JSX
<Label htmlFor="workspace-name">工作区名称</Label>状态与控制摘要
默认
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
htmlFor | string | 未设置 | 关联目标表单控件的唯一标识。 |
组合结构
- 01
Label
键盘约定
- Tab 会聚焦关联控件,而不是标签本身。
可访问性契约
- 在 Field 之外使用时,通过 htmlFor 关联控件 ID。
- 必填提示保持可见,同时由控件保留原生 required 属性。