@ug666/react 文档演示

Label 标签

Label 用于补充表单语义说明，尤其适合与 Input、Textarea、Select 等控件配合使用。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { Label } from '@ug666/react'

变体预览

基础标签与必填标签。

姓名

邮箱地址

状态展示

禁用控件、只读字段与说明文本通常一起出现。

系统编号

发布渠道

尺寸展示

Label 常通过字号和容器间距适配不同密度表单。

紧凑字段

标准字段

代码示例

推荐始终用 htmlFor 关联真实控件。

import { Input, Label } from '@ug666/react'

export function UsernameField() {
  return (
    <div className="space-y-2">
      <Label htmlFor="username" required>
        用户名
      </Label>
      <Input id="username" placeholder="请输入用户名" />
    </div>
  )
}

Props 说明

属性	类型	默认值	说明
required	boolean	false	显示红色星号，提示该字段为必填。
htmlFor	string	—	与表单控件的 id 对应，提升可访问性。
className	string	—	自定义文本颜色、间距等样式。