Base

Label

A form label component designed to pair with inputs, checkboxes, and other form elements. Automatically styles for disabled peers.

Installation

bash

npx polyui add label

Basic

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>
  )
}

Props

属性	类型	默认值	说明
`htmlFor`	`string`	`—`	The id of the associated form element (HTML for attribute)
`className`	`string`	`—`	Additional CSS class names
`children`	`React.ReactNode`	`—`	Label text content