Checkbox

import { useState } from 'react';
import { Checkbox } from '@divistant/circca-react';

export default function Example() {
  const [setuju, setSetuju] = useState(false);
  return (
    <div className="grid gap-3">
      <Checkbox checked={setuju} onCheckedChange={setSetuju}>
        Harga beli & jual sudah diverifikasi
      </Checkbox>
      <Checkbox defaultChecked>Kirim notifikasi ke Finance</Checkbox>
      <Checkbox disabled>Terbitkan faktur pajak otomatis</Checkbox>
      <Checkbox disabled defaultChecked>Sinkron ke BizOps</Checkbox>
    </div>
  );
}

import { useState } from 'react';
import { Checkbox } from '@divistant/circca-react';

const INVOICE = ['INV-0912', 'INV-0913', 'INV-0914'];

export default function Example() {
  const [dipilih, setDipilih] = useState<string[]>(['INV-0912']);
  const semua = dipilih.length === INVOICE.length;
  return (
    <div className="grid gap-2">
      <Checkbox
        checked={semua}
        indeterminate={dipilih.length > 0 && !semua}
        onCheckedChange={v => setDipilih(v ? INVOICE : [])}
      >
        Pilih semua invoice
      </Checkbox>
      <div className="grid gap-2 pl-6">
        {INVOICE.map(no => (
          <Checkbox
            key={no}
            checked={dipilih.includes(no)}
            onCheckedChange={v => setDipilih(d => (v ? [...d, no] : d.filter(x => x !== no)))}
          >
            {no}
          </Checkbox>
        ))}
      </div>
    </div>
  );
}