# Checkbox

Native checkbox input or label wrapper.

## Pure Owl component

```js
import { Checkbox } from "@thebase/ui";
```

```base-ui
<div style="max-width: 28rem" class="w-100 d-flex align-items-center gap-2">
  <Checkbox className="'me-1'">Accept terms and conditions</Checkbox>
</div>
```

| Component | Prop | Type | Notes |
| --- | --- | --- | --- |
| `Checkbox` | `checked` | `Boolean` | optional |
| `Checkbox` | `disabled` | `Boolean` | optional |
| `Checkbox` | `className` | `String` | optional |
| `Checkbox` | `id` | `String` | optional, e.g. for `Label`'s `for` |
| `Checkbox` | `onChange` | `Function` | optional |

See [Pure Owl Components](/examples/blocks.html#/docs/guide/owl-components) for how to load `@base/owl` and `dist/baseui.templates.xml`.

## Static component

```base-ui
<label b-ui="checkbox">
  <input type="checkbox" checked>
  Receive updates
</label>
```

Accessibility: use the native `checked`, `disabled`, and `required` attributes.