# Switch: Controlled

> Pass `checked` and `onCheckedChange`.

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

## Add this example

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

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

## Source

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

import * as React from "react"

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

export function SwitchControlled() {
  const [dark, setDark] = React.useState(false)

  return (
    <label className="flex items-center gap-3 text-sm">
      <Switch checked={dark} onCheckedChange={setDark} />
      Dark mode is {dark ? "on" : "off"}
    </label>
  )
}
```

## Props in this example

### Switch

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean` | – |  |
| `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)
- [Saving](https://hextaui.com/docs/switch/examples/async.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)
- [Right to left](https://hextaui.com/docs/switch/examples/rtl.md)