Checkbox

The checkbox. The mixed state is a separate indeterminate prop.

An on/off input. In the Base UI build checked is strictly a boolean and the mixed state lives on its own prop — the biggest difference if you’re coming from 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

The checked state. `"indeterminate"` is not accepted.

Typeboolean

indeterminate?boolean

The mixed state, independent of `checked`.

Typeboolean

onCheckedChange?(checked: boolean) => void

Fired on change; the value is always a boolean.

Type(checked: boolean) => void

disabled?boolean

Disable interaction.

Typeboolean

Select-all in a table

This is exactly what DataTable’s selection column does.

<Checkbox
  checked={table.getIsAllPageRowsSelected()}
  indeterminate={table.getIsSomePageRowsSelected()}
  onCheckedChange={(checked) => table.toggleAllPageRowsSelected(checked)}
  aria-label="Select all"
/>