# Switch

An instant on/off setting that saves without a Save button (Combos offered, Show on the storefront). 36×20 on desktop, 44×26 on the phone. Kit v2 flips `aria-checked` for you unless a confirm opens.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** Switch
- **Build:** shadcn `Switch` (Radix).
- **In apps/admin today:** `ui/switch.tsx` exists. Restyle to 36×20 / 44×26 and the navy track.
- **Client component:** yes. 

## Content rules

- Label = the setting ("Combos offered"), never "Turn on combos".

## Do

- Confirm before switching off something customers see.

## Don't

- Use a switch inside a form that has a Save button: use a Checkbox.

## Motion

- Thumb slides on `--motion-pop-in` (160ms, `--ease-in`); track colour on `--motion-hover`.

## Accessibility

- **Keyboard:** Space toggles.
- **ARIA:** `role="switch"` + `aria-checked`; label via `aria-labelledby`.
- **Focus:** 2px `--ring` outline, 2px offset.

## Tokens

`--r-pill` `--input` `--motion-hover` `--motion-focus` `--background` `--e-btn-2` `--motion-pop-in` `--primary` `--input-hover` `--primary-hover` `--ring`

## Files

`switch.html` live specimen · `switch.css` kit rules · `switch.d.ts` props · full page: `docs/components/switch/` (phone: `m/`).