标签 Label

封装自 @radix-ui/react-label 的 Label 组件，集成了默认样式和语义支持，适用于表单字段描述。

---

📦 引入方式

import { Label } from '@npmqg/react-ui-core';

---

🧩 使用示例

📚 基本用法

示例

用户名

源码

<Label>用户名</Label>

📚 搭配 Input 使用

示例

邮箱

源码

<div className="flex flex-col space-y-2">
  <Label htmlFor="email">邮箱</Label>
  <input id="email" type="email" className="input" />
</div>

📚 与 peer-disabled 配合

示例

用户名

源码

<div>
  <input id="username" type="text" className="peer disabled:opacity-50" disabled />
  <Label htmlFor="username">用户名</Label>
  {/* Label 会根据 peer-disabled 自动变灰 */}
</div>

💡 类型说明

支持所有原生 label 属性，例如：

• htmlFor
• className
• onClick
• id

---

💡 开发建议

• 尽量为每个表单控件配一个 Label，提高可访问性（适配屏幕阅读器）
• 推荐使用 peer + peer-disabled 控制 Label 样式联动
• 保持 htmlFor 与表单元素的 id 一致，确保语义绑定