基础组件

表单标签

表单标签组件，与输入框、复选框等表单元素配合使用，支持禁用状态的样式联动。

安装

bash

npx polyui add label

基础

tsx

import { Label } from "@polyui/react/label"
import { Input } from "@polyui/react/input"
export function LabelBasic() {
  return (
    <div className="flex flex-col gap-4 w-full max-w-sm">
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="basic-email">Email</Label>
        <Input id="basic-email" type="email" placeholder="Enter your email" />
      </div>
    </div>
  )
}

禁用

Disabled

tsx

import { Label } from "@polyui/react/label"
import { Input } from "@polyui/react/input"
export function LabelDisabled() {
  return (
    <div className="flex flex-col gap-4 w-full max-w-sm">
      <div className="flex flex-col gap-1.5">
        <Label htmlFor="disabled-field">Disabled</Label>
        <Input id="disabled-field" disabled placeholder="Read-only field" />
      </div>
    </div>
  )
}

属性

属性	类型	默认值	说明
`htmlFor`	`string`	`—`	关联的表单元素 id，对应 HTML label 的 for 属性
`className`	`string`	`—`	自定义样式类名
`children`	`React.ReactNode`	`—`	标签文字内容