# Switch (/docs/products/dash-dots/reference/components/switch)

For a choice the person confirms with a button, use a `Checkbox`.

**Children:** Nothing

## Example

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

```xml title="view.dml"
<Switch label="Notify me of payments" checked="{{ notify }}" onChange="setNotify" />
```

```ts title="controller.ts"
export default definePage({
  initialState: { notify: true },
  mutations: {
    setNotify: (_state, event: CheckedEvent) => ({ notify: 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` |       |