Checkbox

用于独立选项、同意确认，或从一组项目中选择多个值。

预览

选中、部分选中与禁用

比较已选中的价格提醒、受控的部分选中工作区和不可用选项。

接收价格提醒已应用到部分工作区不可用选项

安装

npx shadcn@latest add @neumorphism-ui/checkbox

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

选中、部分选中与禁用

npx shadcn@latest add @neumorphism-ui/checkbox @neumorphism-ui/label

Registry JSON

用法

将 Checkbox 的 id 与可见 Label 的 htmlFor 关联。初始值使用 defaultChecked，由应用控制时使用 checked 和 onCheckedChange。

"use client";

import { useId } from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="flex items-center gap-2">
      <Checkbox id={id} name="updates" />
      <Label htmlFor={id}>Receive product updates</Label>
    </div>
  );
}

API 参考

在透明的原生 input 上叠加拟物表面，同时保留表单提交和浏览器无障碍能力。支持受控、非受控、indeterminate 状态以及 shadcn 风格的 onCheckedChange。

组件	属性	类型	默认值	说明
`Checkbox`	`checked`	`boolean \| "indeterminate"`	`—`	受控的选中或混合状态。
`Checkbox`	`defaultChecked`	`boolean`	`false`	非受控模式下的初始选中状态。
`Checkbox`	`onCheckedChange`	`(checked: boolean \| "indeterminate") => void`	`—`	选中状态变化时调用。
`Checkbox`	`disabled`	`boolean`	`false`	禁用输入和指针操作。
`Checkbox`	`name / value / required`	`native input props`	`—`	用于表单提交的原生 checkbox 属性。