# Switch

> Boolean toggle with an iOS-style slider. A signal-forms native control — it implements `FormCheckboxControl`, so `[formField]` binds straight to its `checked` model. `[(checked)]` works standalone, and `[(ngModel)]` / reactive forms keep working through [Angular 22's forms bridge](https://ngwr.dev/guides/forms).

Source: https://ngwr.dev/reference/components/switch  
Kind: Component, Standalone

## Installation

```angular-ts
import { WrSwitch } from 'ngwr/switch';

@Component({ imports: [WrSwitch, FormsModule] })
export class MyComponent {}
```

## Basic usage

```html
<wr-switch [(checked)]="enabled">Notifications</wr-switch>
```

## Disabled

```html
<wr-switch [disabled]="true">Disabled</wr-switch>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `ariaLabel` | Accessible name for a switch used WITHOUT projected text. The wrapping `<label>` names the control whenever content is projected; with none, the label is empty and the input has no name at all. | `string \| null` | `null` |
| `id` | Stable id used to associate the native input with its label. Lands on the inner `<input>`; the host never keeps it. | `string` | `randomId('wr-switch')` |
| `disabled` | Disable the switch. Bound automatically from the field's disabled state when used with `[formField]`. | `boolean` | `false` |
| `readonly` | Refuse edits while staying focusable and submittable. Bound automatically from the field's readonly state when used with `[formField]`. A native checkbox ignores the `readonly` attribute, so this cancels the click's activation behaviour instead — which covers Space too, since the key arrives as a click — and mirrors the state as `aria-readonly`, which role `switch` supports. | `boolean` | `false` |
| `size` | Control size — shares the `--wr-control-*` contract. Unset falls back to the `switch.size` app default from `provideWrConfig()`. | `WrSwitchSize \| null` | `'md'` |
| `checked` | On / off state. Bound by `[formField]`, or two-way via `[(checked)]`. | `boolean` | `false` |
| `(touch)` | Emitted on blur so a bound field can mark itself touched. | `void` | — |

## CSS variables

Custom properties `ngwr/switch` publishes. Each default below is declared on the component's own selector, so a `:root` override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.

| Variable | Default | Declared on |
| --- | --- | --- |
| `--wr-switch-bg` | `var(--wr-color-outline)` | `.wr-switch` +1 variant override |
| `--wr-switch-bg-checked` | `var(--wr-color-primary)` | `.wr-switch` |
| `--wr-switch-color` | `var(--wr-color-on-surface)` | `.wr-switch` +1 variant override |
| `--wr-switch-font-size` | `var(--wr-text-sm)` | `.wr-switch` +2 variant overrides |
| `--wr-switch-line-height` | `var(--wr-control-line-height-md)` | `.wr-switch` +2 variant overrides |
| `--wr-switch-thumb` | `var(--wr-color-surface)` | `.wr-switch` |
| `--wr-switch-thumb-size` | `0.875rem` | `.wr-switch` +2 variant overrides |
| `--wr-switch-track-height` | `1.125rem` | `.wr-switch` +2 variant overrides |
| `--wr-switch-track-width` | `2rem` | `.wr-switch` +2 variant overrides |