Label 标签

渲染与表单控件关联的无障碍标签。

用法

1import { Label } from '@lenso/ui';

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6, Apache-2.0.3import { Input, Label } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { useId } from "react";6import { demoStyles } from "../../demo.stylex";7
8export function Basic() {9  const id = useId();10  return (11    <div {...stylex.props(demoStyles.column)}>12      <Label htmlFor={id}>Name</Label>13      <Input xstyle={demoStyles.field} id={id} placeholder="Enter your name" type="text" />14    </div>15  );16}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

示例

带必填指示符

1<Label htmlFor="email" isRequired>2  Email Address3</Label>4<Input id="email" type="email" />

禁用状态

1<Label htmlFor="username" isDisabled>2  Username3</Label>4<Input id="username" isDisabled />

无效状态

1<Label htmlFor="password" isInvalid>2  Password3</Label>4<Input id="password" isInvalid />

自定义样式

Tailwind CSS

此预览复用英文版适配，不代表中文源示例已完成本地实现。

1"use client";2// Adapted from HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.3import { Input, Label } from "@lenso/ui";4import * as stylex from "@stylexjs/stylex";5import { useId } from "react";6
7const styles = stylex.create({8  layout: { display: "flex", flexDirection: "column", gap: 6 },9  label: {10    fontSize: 12,11    fontWeight: 600,12    letterSpacing: "0.025em",13    color: "var(--accent)",14    textTransform: "uppercase",15  },16  input: { width: 256, maxWidth: "100%", backgroundColor: "var(--field-background)" },17});18
19export function CustomStyles() {20  const id = useId();21  return (22    <div {...stylex.props(styles.layout)}>23      <Label xstyle={styles.label} htmlFor={id}>24        Repository25      </Label>26      <Input xstyle={styles.input} id={id} placeholder="heroui/react" />27    </div>28  );29}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

全局 CSS

若要自定义组件类，可使用 @layer components 指令。了解更多。

1@layer components {2  .label {3    @apply font-semibold text-foreground;4  }5
6  .label--required::after {7    @apply text-accent;8  }9}

样式参考

HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。

CSS 类

Label 使用以下 CSS 类（查看源码样式）：

基础类 [!toc]

.label — 基础标签文本样式

状态修饰类 [!toc]

.label--required 或 [data-required="true"] > .label — 显示必填星号
.label--disabled 或 [data-disabled="true"] .label — 禁用状态样式
.label--invalid 或 [data-invalid="true"] .label 或 [aria-invalid="true"] .label — 无效状态样式（危险/红色文本）

说明： 必填星号会基于 role 与 data-slot 智能应用，并排除：

role="group"、role="radiogroup"、role="checkboxgroup" 的元素
data-slot="radio" 或 data-slot="checkbox" 的元素

从而在分组组件与必填字段组合时避免重复星号。

API 参考

Label

Prop	类型	默认值	描述
`htmlFor`	`string`	-	标签所关联元素的 id
`isRequired`	`boolean`	`false`	是否显示必填指示符
`isDisabled`	`boolean`	`false`	标签是否处于禁用状态
`isInvalid`	`boolean`	`false`	标签是否处于无效状态
`className`	`string`	-	附加的 CSS 类
`children`	`ReactNode`	-	标签内容

无障碍

Label 基于原生 HTML <label>（MDN 参考），并遵循 WAI-ARIA 最佳实践：

使用 htmlFor 与表单控件关联
提供语义化的 <label> 元素
与表单控件关联时支持键盘导航
向屏幕阅读器传达必填与无效状态
点击标签可聚焦/激活关联的表单控件