Switch
On/off switch control for settings, preferences, and feature flags with full keyboard and accessibility support.
API
All inputs and configuration options for zyra-switch.
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Current on/off state; two-way bindable via [(checked)] |
label | string | '' | Visible text label associated with the switch |
labelPosition | 'left' | 'right' | 'right' | Side the label renders relative to the pill |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the pill |
disabled | boolean | false | Disables interaction |
changed (output) | boolean | - | Emits the new checked value whenever the switch changes |
Tokens
CSS custom properties zyra-switch reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Track (off)--zyra-color-switch-track-off | var(--zyra-color-border-strong-color) | Background color of the track when unchecked. |
Track (on)--zyra-color-switch-track-on | var(--zyra-color-primary) | Background color of the track when checked. |
Focus/checked ring--zyra-switch-ring | var(--zyra-color-primary-subtle) | Ring shadow shown when checked and on keyboard focus. |
Thumb--zyra-color-switch-thumb | var(--zyra-color-foreground-inverse) | Fill color of the sliding knob. |
Thumb shadow--zyra-switch-thumb-shadow | var(--zyra-shadow-sm) | Drop shadow that lifts the knob off the track. |
Focus glow--zyra-color-glow-shadow-strong | 0 18px 46px rgba(var(--zyra-color-glow), 0.26) | Extra ambient glow shadow shown on keyboard focus, alongside the ring. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Renders with role="switch" and aria-checked to communicate on/off state
- label is linked via aria-labelledby — always provide a label for screen readers
- Keyboard-operable via Space to toggle and Tab to focus