Preview

Installation

<> import.ts
import { Switch } from "@/components/ui/switch"

Code

<> component.tsx
import { Switch } from "@/components/ui/switch"

<Switch checked={checked} onChange={setChecked} />

API Reference

Switch

A control that allows the user to toggle between checked and not checked.

<> import.ts
import { Switch } from "@/components/ui/switch"

Props

PropTypeDefaultDescription
title
string—Title text for the switch
leftLabel
string—Label text on the left side
rightLabel
string—Label text on the right side
checked
booleanfalseWhether the switch is checked
onChange
(checked: boolean) => void—Change handler for the switch
disabled
booleanfalseWhether the switch is disabled
className
string""Additional CSS classes
size
"sm" | "md" | "lg""md"Size of the switch
controlTheme
booleanfalseWhether the switch controls the theme

Examples

Example 1
<> example.tsx
// Basic switch
<Switch />
Example 2
<> example.tsx
// Switch with labels
<Switch 
  leftLabel="Off" 
  rightLabel="On" 
/>
Example 3
<> example.tsx
// Different sizes
<Switch size="sm" />
<Switch size="md" />
<Switch size="lg" />
Example 4
<> example.tsx
// Theme control switch
<Switch 
  controlTheme={true}
  leftLabel="Light" 
  rightLabel="Dark" 
/>
Example 5
<> example.tsx
// Controlled switch
<Switch 
  checked={isEnabled}
  onChange={setIsEnabled}
/>