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 |
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