# Switch

On/off switch whose colour fills in from behind the thumb as it turns on. Turning off fades it back quickly, and a disabled switch gives a gentle flicker when tapped.

> Primitive · Free · Forms & Inputs — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add switch
```

## Import

```tsx
import { Switch } from "@/components/ui/switch/switch";
```

## Variants

- `settings` — Settings: `npx @lumioui/cli add switch-settings`
- `standalone` — Standalone: `npx @lumioui/cli add switch-standalone`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `checked` | `boolean` | Whether the switch is on. |
| `onCheckedChange` | `(checked: boolean) => void` | Called when the user toggles the switch. |
| `disabled?` | `boolean` | Disable interaction. |
| `className?` | `string` | Extra classes for the outer wrapper. |
| `haptic?` | `"selection" | "light" | false` | Haptic on toggle — default "selection". Set false to disable. |
| `label?` | `string` | Optional label rendered to the left, switch trailing. |
| `iconOn?` | `React.ReactNode` | Optional icon rendered inside the thumb when on. |

Source: https://lumioui.com/components/switch