Checkbox

Selects rows and options. Accent fill when checked.

import { Checkbox, Field } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CheckboxBasic() {
  return (
    <Preview>
      <Field.Root>
        <Field.Label>
          <Checkbox.Root />
          Unchecked
        </Field.Label>
      </Field.Root>
      <Field.Root>
        <Field.Label>
          <Checkbox.Root defaultChecked={true} />
          Checked
        </Field.Label>
      </Field.Root>
      <Field.Root disabled={true}>
        <Field.Label>
          <Checkbox.Root />
          Disabled
        </Field.Label>
      </Field.Root>
    </Preview>
  );
}

Use a checkbox for an independent option or for row selection. For a setting that applies at once, use a Switch.
Give it a visible label or an aria-label that names what it selects.
Clicking a row’s checkbox selects the row; it never opens it. In a Table, use Table.SelectCell.

Indeterminate

import { Checkbox, Field } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CheckboxIndeterminate() {
  return (
    <Preview>
      <Field.Root>
        <Field.Label>
          <Checkbox.Root indeterminate={true} />
          Indeterminate
        </Field.Label>
      </Field.Root>
    </Preview>
  );
}

Set indeterminate when some, but not all, rows in the group are selected; the box shows a dash instead of a check. The group checkbox selects or clears the full set, while each row keeps its own checked state.

Sizes

import { Checkbox, Field } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CheckboxSizes() {
  return (
    <Preview>
      <Field.Root>
        <Field.Label>
          <Checkbox.Root />
          Medium
        </Field.Label>
      </Field.Root>
      <Field.Root>
        <Field.Label>
          <Checkbox.Root size="sm" />
          Small
        </Field.Label>
      </Field.Root>
    </Preview>
  );
}

md is the default, for table rows and forms. sm is for compact menu options.

API

PropType

size?"sm" | "md"

Type"sm" | "md"

Default"md"

checked?boolean

Typeboolean

defaultChecked?boolean

Typeboolean

indeterminate?boolean

Shows a dash instead of a check.

Typeboolean

onCheckedChange?(checked: boolean, eventDetails) => void

Type(checked: boolean, eventDetails) => void

Parts: Root. Built on Base UI Checkbox.