# Checkbox (/docs/products/dash-dots/reference/components/checkbox)

For a setting that applies at once, use a `Switch`.

**Children:** Nothing

## Example

![The Checkbox component](/assets/images/dash-dots/components/checkbox.webp)

```xml title="view.dml"
<Checkbox label="I agree to the terms" checked="{{ agreed }}" onChange="setAgreed" />
```

```ts title="controller.ts"
export default definePage({
  initialState: { agreed: false },
  mutations: {
    setAgreed: (_state, event: CheckedEvent) => ({ agreed: event.detail.checked }),
  },
});
```

## Props

| Prop       | Type      | What it is                            |
| ---------- | --------- | ------------------------------------- |
| `checked`  | `boolean` | Default: `false`.                     |
| `label`    | `string`  |                                       |
| `disabled` | `boolean` | Dims it, and the person can't use it. |

## Events

| Event      | Sends                     | Notes |
| ---------- | ------------------------- | ----- |
| `onChange` | `{ checked }` in `detail` |       |