---
title: Switch
description: A toggle switch for boolean settings.
---
import Source from './_generated/switch.mdx';

A toggle switch for boolean settings, styled per platform.

<DemoFrame component="switch" />

## Installation

```bash
npx touchcn add switch
```

## Usage

<CodeGroup>

```html Angular
<tcn-switch [(checked)]="enabled" />
```

```tsx React
import { TcnSwitch } from '@/components/ui/switch';

<TcnSwitch checked={enabled} onCheckedChange={setEnabled} />
```

```vue Vue
<script setup lang="ts">
import { TcnSwitch } from '@/components/ui/switch';
</script>

<template>
  <TcnSwitch v-model="enabled" />
</template>
```

</CodeGroup>

## Props

| Prop              | Type                         | Default | Description                    |
| ----------------- | ---------------------------- | ------- | ------------------------------ |
| `checked`         | `boolean`                    | `false` | Toggle state (two-way bound).  |
| `onCheckedChange` | `(checked: boolean) => void` | —       | Change callback (React).       |
| `disabled`        | `boolean`                    | `false` | Disable the switch.            |

On React, `TcnSwitch` forwards Radix `Switch` props.

<Source />