复选框 Checkbox

封装自 @radix-ui/react-checkbox ，结合 Tailwind CSS 样式，提供美观、无障碍的复选框组件。

---

📦 引入方式

import { Checkbox } from '@npmqg/react-ui-core';

---

🧩 使用示例

示例

我已阅读并同意条款

源码

import React from "react";
import { Checkbox } from "@npmqg/react-ui-core";

export default function DemoCheckbox() {
  const [checked, setChecked] = React.useState(false);

  return (
    <label className="flex items-center space-x-2">
      <Checkbox checked={checked} onCheckedChange={setChecked} />
      <span>我已阅读并同意条款</span>
    </label>
  );
}

---

🧩 Props

该组件继承了 @radix-ui/react-checkbox 的所有 props。

Prop	类型	描述
checked	boolean | 'indeterminate'	控制复选框的当前状态
defaultChecked	boolean | 'indeterminate'	非受控组件的默认选中状态
onCheckedChange	(checked: boolean | 'indeterminate') => void	状态变更时回调
disabled	boolean	是否禁用
className	string	额外添加的自定义样式类
其他	...	所有 Radix Checkbox.Root 支持的原生 props

---

✨ 特性

• 使用 Radix UI 提供的可访问性基础
• 支持自定义样式
• 内置选中图标（Lucide 的 Check）
• 禁用状态支持
• 可与 Tailwind CSS utility class 自由组合

---

注意事项

• 推荐搭配 label 使用增强可访问性体验。
• 若需要中间状态（indeterminate），设置 checked="indeterminate" 即可。
• disabled 状态会自动禁用点击和降低透明度。