---
title: Switch
description: A toggle control for switching between two states.
links:
doc: https://base-ui.com/react/components/switch
api: https://base-ui.com/react/components/switch#api-reference
---
```tsx
'use client';
import { Switch } from '@/components/ui/switch';
export function SwitchDefault() {
return ;
}
```
## Installation
```bash
npx shadcn@latest add @fab-ui/switch
```
**Install the following dependencies:**
```bash
npm install @base-ui/react
```
**Copy and paste the following code into your project.**
```tsx
'use client';
import { Switch as SwitchPrimitive } from '@base-ui/react/switch';
import { cn } from '@/lib/utils';
function Switch({
className,
size = 'default',
...props
}: SwitchPrimitive.Root.Props & {
size?: 'sm' | 'default';
}) {
return (
);
}
export { Switch };
```
**Update the import paths to match your project setup.**
## Usage
```tsx
import { Switch } from "@/components/ui/switch"
```
```tsx
```
## Examples
### With Label
```tsx
'use client';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
export function SwitchWithLabel() {
return (
);
}
```