Checkbox

import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";

export default function Example() {
  const [items, setItems] = React.useState({ tin: true, cup: false });
  const all = items.tin && items.cup;
  const some = items.tin || items.cup;
  return (
    <div style={{ display: "grid", gap: 12 }}>
      <Checkbox label="Add everything" checked={all} indeterminate={some && !all} onChange={e => setItems({ tin: e.target.checked, cup: e.target.checked })} />
      <div style={{ display: "grid", gap: 12, paddingLeft: 28 }}>
        <Checkbox label="Darjeeling tin" checked={items.tin} onChange={e => setItems({ ...items, tin: e.target.checked })} />
        <Checkbox label="Clay cup" checked={items.cup} onChange={e => setItems({ ...items, cup: e.target.checked })} />
      </div>
      <Checkbox label="Gift wrap (not available)" disabled />
    </div>
  );
}