React 组件

UGLabel 标签

UGLabel 用于补充表单语义说明，尤其适合与 UGInput、UGTextarea、UGSelect 等控件配合使用。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import { UGLabel } from '@ug666/ui-react'

变体预览

基础标签与必填标签。

姓名

邮箱地址

状态展示

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

系统编号

发布渠道

尺寸展示

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

紧凑字段

标准字段

代码示例

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

tsx

import { UGInput, UGLabel } from '@ug666/ui-react'

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

Props

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