## Switch
A single setting that takes effect immediately — on or off.
Tier: leaf-lit. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — <aha-switch> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, dashboard, settings, audience.
Props:
- checked: boolean, default false. On/off state (reflected)
- disabled: boolean, default false. Non-interactive
- loading: boolean, default false. Spinner in the knob; blocks toggle while busy (aria-busy)
- size: 'default' | 'small', default default. Track 44×22 (default) or 28×16 (small)
- on-text: string, default —. Text shown inside the track when on
- off-text: string, default —. Text shown inside the track when off
- on-icon: icon name, default —. DS icon shown inside the track when on (wins over on-text)
- off-icon: icon name, default —. DS icon shown inside the track when off (wins over off-text)
- change: CustomEvent<{checked}>, default —. Composed event on toggle; read e.detail.checked
Tokens: gray-20, gray-50, color-primary, white, text-tertiary, radius-pill, motion-slow.
Use when: Switch (a single setting that applies immediately — no save step); Checkbox (options saved together as a group, or expressing consent); Radio (exactly one from a small mutually-exclusive set).