Switch

import { Component } from '@angular/core';
import { WrSwitch } from 'ngwr/switch';

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

Notifications

Value: true

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

Off

On + disabled

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

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.	`WrSwitchSize`	`'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`	—

Built on	Form
Used by	Schema Form

Installation