Neumorphism UI
表单与选择@neumorphism-ui/label

Label

对原生 label 的轻量封装，透传所有标准属性，并提供与 peer-disabled 状态一致的文字颜色和 cursor。

@neumorphism-ui/label
Registry JSON

预览

点击标签会将焦点移到关联的输入控件。

安装

安装: labelnpx shadcn@latest add @neumorphism-ui/label

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Label import 代码
import { Label } from "@/components/ui/label"

Example

Label 用法代码
<div className="grid gap-2">
  <Label htmlFor="project-name">项目名称</Label>
  <Input id="project-name" name="projectName" />
</div>

API 参考

组件属性类型默认值说明
LabelhtmlForstring—要关联的 form control id。
Labelchildren必填React.ReactNode—说明 control 用途的文本。
LabelclassNamestring—扩展布局和状态样式。

无障碍

  • 01

    htmlFor 必须与目标 control 的 id 完全一致。

  • 02

    为 RadioGroup 等多个 control 命名时，应使用 fieldset/legend 或 aria-labelledby，而不是单独的 Label。

  • 03

    必填状态和辅助说明不仅要有视觉标识，还应通过 required、aria-describedby 传达。