# Switch

Toggle control for switching between on and off states

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import { Label, Switch } from "@databricks/appkit-ui/react"

export default function SwitchExample() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

```

## Switch[​](#switch-1 "Direct link to Switch")

Toggle control for switching between on and off states

**Source:** [`packages/appkit-ui/src/react/ui/switch.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/switch.tsx)

### Props[​](#props "Direct link to Props")

| Prop              | Type                           | Required | Default | Description |
| ----------------- | ------------------------------ | -------- | ------- | ----------- |
| `checked`         | `boolean`                      |          | -       | -           |
| `defaultChecked`  | `boolean`                      |          | -       | -           |
| `required`        | `boolean`                      |          | -       | -           |
| `onCheckedChange` | `((checked: boolean) => void)` |          | -       | -           |
| `asChild`         | `boolean`                      |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Switch } from '@databricks/appkit-ui';

<Switch /* props */ />

```