# Checkbox

> A checkbox whose tick draws itself, with an indeterminate state.

Component · Free · https://lodeui.com/components/checkbox

## When to use

- Independent on/off choices in a form that apply on submit.
- Selecting rows, with an indeterminate 'select all'.

## When not to use

- Settings that apply instantly: use a switch.
- One choice from several: use a radio group.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/checkbox.json
```

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";

export function Terms() {
  const [ok, setOk] = React.useState(false);
  return (
    <label className="flex items-center gap-2 text-sm">
      <Checkbox checked={ok} onCheckedChange={setOk} aria-label="Accept terms" /> I accept the terms
    </label>
  );
}
```

## API reference

### Checkbox

A checkbox whose tick draws itself, with a mixed state.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| checked / defaultChecked | `boolean \| "indeterminate"` | – | Controlled state; indeterminate shows a dash. |
| onCheckedChange | `(checked: boolean) => void` | – | Called on toggle. |
| disabled | `boolean` | – | Dims and blocks interaction. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Space | Toggle |

## Accessibility

- role="checkbox" with aria-checked true, false or mixed.

## Motion

- The check path draws in with pathLength (220ms).

## Responsive behavior

- 18px square; place it in a label for a larger tap target.

## Performance

- One SVG path.

## Notes for AI

- Wrap in <label> so clicking the text toggles it.

## Related

- [Switch](https://lodeui.com/components/switch) — A toggle whose thumb stretches as you press it.
- [Radio group](https://lodeui.com/components/radio-group) — Radios as a list or as choice cards, with arrow-key navigation.
- [Data table](https://lodeui.com/components/data-table) — Sorting, search, filters, selection, bulk actions, column visibility, pagination, expandable rows, export and mobile cards.