A square checkbox with a quiet indeterminate (mixed) state, label and secondary hint text, for forms that need an explicit opt-in or a parent "select all" control.
"use client";
import * as React from "react";
import ZCheckbox from "@/components/ui/zcheckbox";
export default function ZCheckboxIndeterminateDemo() {
const [rules, setRules] = React.useState([
{ name: "局域网直连", on: true },
{ name: "国内域名直连", on: true },
{ name: "广告域名拦截", on: false },
]);
const allOn = rules.every((rule) => rule.on);
const someOn = rules.some((rule) => rule.on) && !allOn;
function toggleAll(next: boolean) {
setRules(rules.map((rule) => ({ ...rule, on: next })));
}
return (
<div className="flex flex-col gap-3">
<ZCheckbox
checked={allOn}
indeterminate={someOn}
onCheckedChange={toggleAll}
label="全选规则"
hint="三项都勾选后才会变成实心勾"
/>
<div className="flex flex-col gap-2 pl-6">
{rules.map((rule, i) => (
<ZCheckbox
key={rule.name}
checked={rule.on}
onCheckedChange={(value) =>
setRules(
rules.map((r, idx) => (idx === i ? { ...r, on: value } : r)),
)
}
label={rule.name}
/>
))}
</div>
</div>
);
}
