║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Checkbox description: A control that allows the user to toggle between checked and not checked. links: docs: https://base-ui.com/react/components/checkbox api: https://base-ui.com/react/components/checkbox#api-reference

<ComponentPreview name="checkbox-demo" />

Installation

<CodeBlockCommand component="checkbox" />

---

Examples

Size

<ComponentPreview name="checkbox-size" />

Shape

<ComponentPreview name="checkbox-shape" />

Color

<ComponentPreview name="checkbox-color" />

Cards

<ComponentPreview name="checkbox-cards" />

With Form

<ComponentPreview name="checkbox-form" />

Migrating from Radix UI

<Steps> <Step> <include>migration-steps/common.mdx</include> </Step> <Step> ### Indeterminate State

In Radix UI, you can pass the `checked` or `defaultChecked` prop with a value of `"indeterminate"` to the `Checkbox` component to control the indeterminate state.

```tsx
import { Checkbox } from "@/components/ui/checkbox"

// [!code highlight]
<Checkbox checked="indeterminate" />
// or
// [!code highlight]
<Checkbox defaultChecked="indeterminate" />
```

With Base UI, you can pass the `indeterminate` prop to the `Checkbox` component to control the indeterminate state.

```tsx
import { Checkbox } from "@/components/ui/checkbox"

// [!code highlight]
<Checkbox indeterminate />
```

</Step> </Steps>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║