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"
[(checked)]="enabled"
/> Bind [(checked)] without forms, or [(ngModel)] / formControl with them. checkedChange is the change event; switchChange is deprecated and is removed in 1.0 (ADR-0056).
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.