Checkbox

import { useState } from 'react';
import { Checkbox } from '@mihcm/ui/Checkbox';
import { Label } from '@mihcm/ui/Label';
 
const [checked, setChecked] = useState(false);
 
<div className="flex items-center gap-2">
  <Checkbox id="terms" checked={checked} onCheckedChange={setChecked} />
  <Label htmlFor="terms">I agree to the terms of service</Label>
</div>

import { useState } from 'react';
import { Checkbox, type CheckedState } from '@mihcm/ui/Checkbox';
import { Label } from '@mihcm/ui/Label';
 
const [items, setItems] = useState([true, false, true]);
const allChecked = items.every(Boolean);
const someChecked = items.some(Boolean);
const parentState: CheckedState = allChecked
  ? true
  : someChecked
    ? 'indeterminate'
    : false;
 
<div className="space-y-2">
  <div className="flex items-center gap-2">
    <Checkbox
      id="select-all"
      checked={parentState}
      onCheckedChange={() => setItems(items.map(() => !allChecked))}
    />
    <Label htmlFor="select-all">Select all</Label>
  </div>
  {items.map((val, i) => (
    <div key={i} className="flex items-center gap-2 pl-6">
      <Checkbox
        id={`item-${i}`}
        checked={val}
        onCheckedChange={(v) => {
          const next = [...items];
          next[i] = v === true;
          setItems(next);
        }}
      />
      <Label htmlFor={`item-${i}`}>Item {i + 1}</Label>
    </div>
  ))}
</div>

<div className="flex items-center gap-2">
  <Checkbox id="disabled" checked={false} onCheckedChange={() => {}} disabled />
  <Label htmlFor="disabled">Cannot change this</Label>
</div>