# ASSwitch

`ASSwitch` is a controlled on/off control. The parent supplies `checked` and handles `onChange(nextChecked)`; rejecting or delaying that request leaves the displayed state unchanged. Prop updates never invoke the callback. There is no uncontrolled or indeterminate mode.

```tsx
<ASSwitch checked={enabled} onChange={setEnabled} label="Notifications" />
```

The focusable root exposes `role="switch"`, `aria-checked`, and `aria-disabled`. Space activates on release. Disabled controls are excluded from sequential keyboard navigation and suppress change requests. Supply `label`, `aria-label`, or `aria-labelledby`; keep the label non-interactive. `ref` targets the root `div`. This is not a form input: the owner handles submission and reset.

`ASTappable` owns pointer activation across the track and label. Its presentation-only child is hidden from accessibility; the outer switch owns the accessible name and checked state. Keyboard and assistive-technology clicks use separate paths so the subsequent pointer click cannot repeat a tap.

`size` uses `ComponentSize.Small`, `Medium`, or `Large`. `theme`, `themeOverrides`, `className`, and `style` follow ASUI conventions. Semantic styles live in `components.switch`. Motion is disabled under `prefers-reduced-motion`.

The thumb cross-fades between its off and on backgrounds while sliding, using the same duration and easing from `components.switch.transition`. This also supports gradient backgrounds. Reduced-motion preferences disable both animations.

The visible track uses the shared control height token: 30px, 40px, or 50px by default, with a width twice that height. Size Comparison places each size alongside `ASButton` and `ASTextField` using the same theme. Theme overrides can still customize track geometry independently.

The track has a `2px solid #52565e` outline with a `-2px` offset in every state, including disabled. Configure `trackOutlineWidth` and `trackOutlineColor` through the switch theme; the offset is always the negative outline width, keeping the outline inside the track without changing layout. The keyboard focus ring is separate.

The circular thumb uses rounded button styling without an icon. Set `trackColor` and `thumbColor` for the off state, `checkedTrackColor` and `checkedThumbColor` for the on state, and `disabledTrackColor` and `disabledThumbColor` for the disabled state. Background slots accept solid colors or gradients. The thumb's outline and interaction shadows come from the resolved `components.iconbutton` styles.

Use `themeOverrides` for a local adjustment, or configure `components.switch` in your project theme. See the [theme property reference](./theme-reference.md#asswitch) for defaults and [Applying an ASUI theme](./theme-provider.md) for inheritance.

```tsx
<ASSwitch
  checked={enabled}
  onChange={setEnabled}
  label="Notifications"
  themeOverrides={{ components: { switch: {
    trackOutlineWidth: '2px',
    trackOutlineColor: '#52565e',
  } } }}
/>
```

Storybook's Default example inherits the global Yellow / Blue toolbar selection, with shared typography and spacing. Its checked Control updates when the switch changes. Parent keeps state demonstrates a request that the parent does not apply; Delayed state update demonstrates applying it after 300 ms. See [Storybook themes](./storybook-themes.md).