Docs / Components
SenseToggleSwitchComponent
Accessible on/off switch from @artificialsenselabs/ui with label, keyboard support, and forms integration.
Live demo: run nx serve showcase and open /components/toggle-switch (port 4202).
Overview
Category: Form control. Selector: sense-toggle-switch. Import: import { SenseToggleSwitchComponent } from '@artificialsenselabs/ui';
<sense-toggle-switch
label="Notifications"
[(ngModel)]="enabled"
(switchChange)="onSwitchChange($event)"
/> Listen to switchChange for the full event payload — not checkedChange from the model() alone.
Inputs & outputs
| Member | Type | Default | Description |
|---|---|---|---|
label | string | null | null | Visible label; omit when using ariaLabel alone. |
ariaLabel | string | null | null | Accessible name when no visible label. |
checked | boolean | false | Two-way model for on/off state. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual density preset. |
readonly | boolean | false | Prevents toggling while keeping the control focusable. |
switchChange | SenseToggleSwitchChangeEvent | — | Emits { checked, originalEvent } on user toggle. |
Accessibility
- Native checkbox with
role="switch"per the ARIA switch pattern. - Visible labels use
aria-labelledby; icon-only usesaria-label. - Space key toggles when focused; decorative track is
aria-hidden. - Implements
ControlValueAccessorfor Angular forms integration.