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.uniqueId('xui-switch')ariaLabelstring | nullAccessible name for the switch — what it turns on.nullariaLabelledbystring | 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