# Switch

> An on/off toggle.

## Examples

### Basic

```vue
<script setup lang="ts">
const notifications = ref(true);
const marketing = ref(false);
</script>

<template>
  <div class="demo-stack">
    <UiSwitch v-model="notifications" label="Push notifications" />
    <UiSwitch v-model="marketing" label="Product updates" size="small" />
    <UiSwitch :model-value="true" label="Required" disabled />
  </div>
</template>
```

### Hint

Like other fields, `hint` and `error` show under the label and are read as its description.

```vue
<script setup lang="ts">
const digest = ref(true);
</script>

<template>
  <div class="demo-stack">
    <UiSwitch v-model="digest" label="Weekly digest" hint="A summary every Monday morning." />
  </div>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `disabled` | `boolean` | `false` | Disables the switch. |
| `label` | `string` | — | Text next to the switch. The default slot overrides it. |
| `size` | `"medium" \| "small"` | `"medium"` | Size hook, exposed as `data-switch-size`. |
| `hint` | `string` | — | Help text under the switch, announced as its description. |
| `error` | `string \| boolean` | — | `true` marks it invalid; a string also shows it as the message, replacing the hint. |
| `name` | `string` | — | Form field name: while on, a native form submits `value` under it. |
| `value` | `string` | `"on"` | What a native form submits while on, as a checkbox would. |
| `id` | `string` | — | Id for the switch; generated with `useId()` when omitted. |
| `modelValue` | `boolean` | `false` | On or off. |

| Event | Payload | Description |
| --- | --- | --- |
| `update:modelValue` | `[value: boolean]` | `v-model:modelValue` update. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | Label content, replacing `label`. |

## Styling

- Parts (`[data-part="…"]`): `switch`, `switch-track`, `switch-thumb`, `switch-label`, `field-message`
- State attributes: `data-switch-size`, `data-switch-checked`, `data-switch-error`, `data-field-name`, `data-field-tone`

## Keyboard

| Keys              | Action |
| ----------------- | ------ |
| `Space` / `Enter` | Toggle |