Label.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/label.tsx

功能描述

标签组件，用于表单字段的标签文本。基于 Radix UI，支持禁用状态样式。

导出内容

• Label - 标签组件

Props 接口

Label

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
htmlFor	string	否	-	关联的输入框 ID
...props	React.ComponentProps<typeof LabelPrimitive.Root>	否	-	Radix Label 属性

依赖

• @radix-ui/react-label - Radix UI 标签原语
• @/lib/utils - 工具函数 (cn)

使用示例

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

// 基础用法
<div className="grid w-full max-w-sm items-center gap-1.5">
  <Label htmlFor="email">邮箱地址</Label>
  <Input type="email" id="email" />
</div>

// 在 Form 中使用
<FormItem>
  <FormLabel>用户名</FormLabel>
  <FormControl>
    <Input {...field} />
  </FormControl>
</FormItem>