Label

用于显示表单控件的名称，并让标签文字成为可点击区域。

预览

输入与设置标签

点击邮箱标签以聚焦输入，或点击周报标签切换关联的开关。

点击标签会将焦点移到关联的输入控件。电子邮箱地址

接收每周报告

安装

npx shadcn@latest add @neumorphism-ui/label

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

输入与设置标签

npx shadcn@latest add @neumorphism-ui/input @neumorphism-ui/label @neumorphism-ui/switch

Registry JSON

用法

将 Label 的 htmlFor 与控件 id 保持一致。标签始终可见，示例或验证信息使用独立的辅助文字。

"use client";

import { useId } from "react";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Project name</Label>
      <Input id={id} name="projectName" />
    </div>
  );
}

API 参考

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

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

预览

输入与设置标签

安装

用法

API 参考

无障碍