Switch
@xui/switchA toggle for an immediate on/off setting. A real role="switch" button: Space/Enter toggle it, and it is a ControlValueAccessor, so ngModel and reactive forms bind straight to it.
Install
pnpm add @xui/switch Add the barrel to a standalone component's imports:
import { XuiSwitchImports } from '@xui/switch';@Component({ imports: [XuiSwitchImports], // …})Examples
Default
Loading preview…
<xui-switch aria-label="Wi-Fi" />Large
Loading preview…
<xui-switch aria-label="Wi-Fi" size="lg" />Checked
Loading preview…
<xui-switch aria-label="Wi-Fi" [checked]="true" />Disabled
Loading preview…
<div class="flex gap-4"> <xui-switch aria-label="off" disabled /> <xui-switch aria-label="on" [checked]="true" disabled /></div>With label
Loading preview…
<label class="flex items-center gap-2 text-sm"> <xui-switch [(checked)]="on" /> Push notifications — {{ on ? 'on' : 'off' }}</label>API
A toggle for an immediate on/off setting — a live preference, not a value you submit with a form (that is a checkbox's job).
Variants
sizemdInputs
classClassValueThe user-defined classes on the track. Merged last so they win.''sizeXuiSwitchSizeTrack and thumb size, from the shared control scale.this.config.sizeidstring | nullThe switch's DOM id, so a <label for> can point at it. Defaults to a generated unique id.injectUniqueId('xui-switch')aria-labelstring | nullAccessible name for the switch — what it turns on.nullaria-labelledbystring | nullId of an element naming the switch. Use it instead of aria-label when that text is already on screen.nullcheckedbooleanChecked state. Works two-way and via ngModel/formControl.falsedisabledbooleanBlock interaction and dim the switch.false