Checkbox

两端带切角的小号方块：未勾选时为凹槽，勾选后填充强调色，显示墨黑勾号。尺寸以 em 为单位，随旁边标签的字号缩放。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/checkbox

示例

已勾选、未勾选、半选与禁用

Bring the spare batteryWait for a replySome of the crates loadedSigned off by the foreman

checkbox-basic.tsx

import { Checkbox } from "@/components/zero/checkbox";export default function CheckboxBasic() {  return (    <div className="grid gap-3">      <label className="flex items-center gap-2.5">        <Checkbox defaultChecked />        Bring the spare battery      </label>      <label className="flex items-center gap-2.5">        <Checkbox />        Wait for a reply      </label>      <label className="flex items-center gap-2.5">        <Checkbox indeterminate />        Some of the crates loaded      </label>      <label className="flex items-center gap-2.5 text-zero-text-3">        <Checkbox disabled />        Signed off by the foreman      </label>    </div>  );}

行为

将其与文字一同放入 <label>，点击整个标签即可切换。勾号带回弹弹入，消失更快；按下时像按钮一样收缩。

indeterminate 以减号代替勾号，用于统领一组复选框的全选框。通过键盘聚焦时显示焦点框；位于无效的 Field 内或带有 aria-invalid 时，描边变为危险色。

属性

Checkbox

属性	类型	默认值	说明
checked	boolean	—	是否勾选（受控），配合 onCheckedChange 使用。
defaultChecked	boolean	false	默认是否勾选（非受控）。
indeterminate	boolean	false	显示减号，表示所代表的选项中有一部分已勾选。

另可传入 Base UI Checkbox.Root 的全部属性。