ZCheckbox

Forms

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ZCheckbox to your project and fits it to your theme.

Code

How ZCheckbox is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}