# Switch: iOS

> `variant="ios"` uses a taller track, a capsule thumb and green when on. Press, drag and saving work the same.

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

## Add this example

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

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

## Source

```tsx title="components/examples/switch/ios.tsx"
import { Switch } from "@/components/ui/switch"

export function SwitchIos() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch variant="ios" />
        Airplane mode
      </label>
      <label className="flex items-center gap-3">
        <Switch variant="ios" defaultChecked />
        Wi-Fi
      </label>
      <div className="flex items-center gap-4">
        <Switch variant="ios" size="sm" aria-label="Small" defaultChecked />
        <Switch variant="ios" size="lg" aria-label="Large" defaultChecked />
      </div>
    </div>
  )
}
```

## Props in this example

### Switch

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `defaultChecked` | `boolean` | `false` |  |
| `variant` | `"default" \| "ios"` | `"default"` |  |
| `size` | `"sm" \| "default" \| "lg"` | `"default"` |  |

## More Switch examples

- [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)
- [Controlled](https://hextaui.com/docs/switch/examples/controlled.md)
- [Right to left](https://hextaui.com/docs/switch/examples/rtl.md)