# Switch: Saving

> Return a promise from `onCheckedChange` and the switch flips right away, even when it's controlled. A spinner shows in the thumb only if saving takes longer than 400ms. If it rejects, the switch flips back and shakes.

Example: https://hextaui.com/docs/switch/examples/async
Component docs: https://hextaui.com/docs/switch.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/switch-async.json
```

This adds `components/examples/switch/async.tsx` with the Switch component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/switch/async.tsx"
"use client"

import { Switch } from "@/components/ui/switch"

function save(succeed: boolean) {
  return new Promise<void>((resolve, reject) =>
    setTimeout(() => (succeed ? resolve() : reject(new Error("Offline"))), 1200)
  )
}

export function SwitchAsync() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch onCheckedChange={() => save(true)} />
        Sync to cloud (saves)
      </label>
      <label className="flex items-center gap-3">
        <Switch defaultChecked onCheckedChange={() => save(false)} />
        Public profile (fails and flips back)
      </label>
    </div>
  )
}
```

## Props in this example

### Switch

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultChecked` | `boolean` | `false` |  |
| `onCheckedChange` | `(checked, details) => void \| Promise` | – | Return a promise to show the saving state. On rejection an uncontrolled switch flips back. |

## More Switch examples

- [iOS](https://hextaui.com/docs/switch/examples/ios.md)
- [On and off marks](https://hextaui.com/docs/switch/examples/icons.md)
- [Sizes](https://hextaui.com/docs/switch/examples/sizes.md)
- [In a field](https://hextaui.com/docs/switch/examples/field.md)
- [Disabled and read-only](https://hextaui.com/docs/switch/examples/states.md)
- [Controlled](https://hextaui.com/docs/switch/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/switch/examples/rtl.md)