Checkbox.tsx

基本信息

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

功能描述

复选框组件，用于选择/取消选择选项。基于 Radix UI，支持无障碍访问和键盘操作。

导出内容

• Checkbox - 复选框组件

Props 接口

Checkbox

属性	类型	必填	默认值	说明
className	string	否	-	自定义CSS类名
checked	`boolean \	'indeterminate'`	否	-	选中状态
defaultChecked	boolean	否	-	默认选中状态
onCheckedChange	`(checked: boolean \	'indeterminate') => void`	否	-	状态变化回调
disabled	boolean	否	-	是否禁用
...props	React.ComponentProps<typeof CheckboxPrimitive.Root>	否	-	Radix UI Checkbox 属性

依赖

• @radix-ui/react-checkbox - Radix UI 复选框原语
• lucide-react - 图标库 (CheckIcon)
• @/lib/utils - 工具函数 (cn)

使用示例

import { Checkbox } from "@/components/ui/checkbox";
import { useState } from "react";

// 受控组件
const [checked, setChecked] = useState(false);
<Checkbox 
  checked={checked} 
  onCheckedChange={setChecked} 
/>

// 非受控组件
<Checkbox defaultChecked />

// 带标签
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label htmlFor="terms" className="text-sm">
    我同意服务条款
  </label>
</div>

// 禁用状态
<Checkbox disabled />
<Checkbox disabled checked />