Checkbox

チェックボックス。中間状態は indeterminate プロップで。

オン/オフの入力です。Base UI 版では checked が boolean のみを取り、中間状態は別プロップに分かれています — Radix 版から移ってきた場合の最大の違いです。

export const client = "only";

import { useState } from "react";
import { Checkbox, Label } from "@squadbase/vantage/ui";

export default function Example() {
  const [checked, setChecked] = useState(true);
  return (
    <div className="flex flex-col gap-3">
      <Label className="flex items-center gap-2">
        <Checkbox checked={checked} onCheckedChange={setChecked} />
        メール通知を受け取る
      </Label>
      <Label className="flex items-center gap-2">
        <Checkbox indeterminate />
        一部だけ選択されている状態
      </Label>
      <Label className="flex items-center gap-2 opacity-50">
        <Checkbox disabled />
        無効
      </Label>
    </div>
  );
}

import { Checkbox } from "@squadbase/vantage/ui";

PropType

checked?boolean

チェック状態。`"indeterminate"` は受け付けない。

Typeboolean

indeterminate?boolean

中間状態（一部だけ選択）。`checked` とは独立。

Typeboolean

onCheckedChange?(checked: boolean) => void

変更時。値は必ず boolean。

Type(checked: boolean) => void

disabled?boolean

操作を無効にする。

Typeboolean

テーブルの全選択

DataTable の選択列がこの形です。

<Checkbox
  checked={table.getIsAllPageRowsSelected()}
  indeterminate={table.getIsSomePageRowsSelected()}
  onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
  aria-label="全て選択"
/>