## Async Switch (S—154)

A switch that saves to a server: the knob shows a spinner while pending, and snaps back with a reason if the save fails.

- URL: https://sundaeui.dev/components/async-switch
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/async-switch.json`
- Tags: settings, optimistic, async, switch, toggle, loading

Flipping moves the knob immediately (optimistic) but a small spinner sits inside it until the request settles. On failure the knob springs back and a one-line reason appears.
The switch is aria-busy while pending and ignores further clicks.

### Usage

```tsx
import { AsyncSwitch } from '@/components/sundae/async-switch'

<AsyncSwitch />
```

### Props

- `checked / defaultChecked` (`boolean`): State.
- `onCheckedChange` (`(on: boolean) => Promise<void>`, required): Persist; reject to revert.
- `label` (`string`, required): Label.
- `description` (`string`): Secondary text.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Settings that save immediately, feature toggles, privacy controls.

### When not to use

- Forms with a Save button: use a plain switch.

### Accessibility

- role="switch" with aria-checked and aria-busy; failures are announced with role="alert".
- Reduced motion removes the movement and keeps every state change.