---
title: Checkbox
description: Selects rows and options. Accent fill when checked.
---

```tsx
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](/deft/components/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](/deft/components/table), use `Table.SelectCell`.

## Indeterminate

```tsx
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

```tsx
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

| Prop | Type | Default | Description |
| - | - | - | - |
| `size?` | `"sm" \| "md"` | `"md"` | |
| `checked?` | `boolean` | - | |
| `defaultChecked?` | `boolean` | - | |
| `indeterminate?` | `boolean` | - | Shows a dash instead of a check. |
| `onCheckedChange?` | `(checked: boolean, eventDetails) => void` | - | |

Parts: `Root`. Built on Base UI [Checkbox](https://base-ui.com/react/components/checkbox).