Checkbox

<div className="flex items-center gap-2">
  <Checkbox size="xs" />
  <label>Extra Small</label>
</div>
<div className="flex items-center gap-2">
  <Checkbox size="sm" />
  <label>Small</label>
</div>
<div className="flex items-center gap-2">
  <Checkbox size="md" />
  <label>Medium</label>
</div>
<div className="flex items-center gap-2">
  <Checkbox size="lg" />
  <label>Large</label>
</div>
<div className="flex items-center gap-2">
  <Checkbox size="xl" />
  <label>Extra Large</label>
</div>

<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <label htmlFor="terms" className="text-sm">
    이용약관에 동의합니다
  </label>
</div>

<Checkbox id="checked" defaultChecked />

<Checkbox id="disabled-unchecked" disabled />
<Checkbox id="disabled-checked" disabled defaultChecked />

<Checkbox id="readonly-unchecked" readOnly />
<Checkbox id="readonly-checked" readOnly defaultChecked />

<Checkbox id="error-unchecked" aria-invalid />
<Checkbox id="error-checked" aria-invalid defaultChecked />

<Checkbox indeterminate checked />

<fieldset>
  <legend className="text-sm font-medium mb-2">알림 설정</legend>
  <div className="space-y-3">
    <div className="flex items-center gap-2">
      <Checkbox id="email" defaultChecked />
      <label htmlFor="email">이메일 알림</label>
    </div>
    <div className="flex items-center gap-2">
      <Checkbox id="sms" />
      <label htmlFor="sms">SMS 알림</label>
    </div>
    <div className="flex items-center gap-2">
      <Checkbox id="push" defaultChecked />
      <label htmlFor="push">푸시 알림</label>
    </div>
  </div>
</fieldset>

{/* 폼 제출 시 체크된 항목만 전송됩니다 */}
{/* 예: "디자인"과 "기획"을 선택하면 interest=design&interest=pm */}
<form>
  <Checkbox name="interest" value="design" />
  <Checkbox name="interest" value="development" />
  <Checkbox name="interest" value="pm" />
</form>

const [items, setItems] = useState({ terms: false, privacy: false, marketing: false })
const allChecked = Object.values(items).every(Boolean)
const someChecked = Object.values(items).some(Boolean)
 
<div className="space-y-3">
  <div className="flex items-center gap-2">
    <Checkbox
      id="agree-all"
      checked={allChecked}
      indeterminate={someChecked && !allChecked}
      onCheckedChange={(checked) =>
        setItems({ terms: !!checked, privacy: !!checked, marketing: !!checked })
      }
    />
    <label htmlFor="agree-all" className="font-medium">
      전체 동의
    </label>
  </div>
  <hr />
  <div className="flex items-center gap-2">
    <Checkbox
      id="agree-terms"
      checked={items.terms}
      onCheckedChange={(checked) =>
        setItems((prev) => ({ ...prev, terms: !!checked }))
      }
    />
    <label htmlFor="agree-terms">
      이용약관 동의 <span className="text-destructive">(필수)</span>
    </label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox
      id="agree-privacy"
      checked={items.privacy}
      onCheckedChange={(checked) =>
        setItems((prev) => ({ ...prev, privacy: !!checked }))
      }
    />
    <label htmlFor="agree-privacy">
      개인정보 처리방침 동의{" "}
      <span className="text-destructive">(필수)</span>
    </label>
  </div>
  <div className="flex items-center gap-2">
    <Checkbox
      id="agree-marketing"
      checked={items.marketing}
      onCheckedChange={(checked) =>
        setItems((prev) => ({ ...prev, marketing: !!checked }))
      }
    />
    <label htmlFor="agree-marketing">
      마케팅 정보 수신 동의{" "}
      <span className="text-muted-foreground">(선택)</span>
    </label>
  </div>
</div>