Switch
A toggle switch component for binary choices. Perfect for settings, preferences, and feature toggles with multiple variants and sizes.
Basic Usage
Disabled
Sizes
Small
Medium (Default)
Large
Variants
Default
Success
Warning
Error
With Labels
Notifications
Receive push notifications
Dark Mode
Switch to dark theme
Auto-save
Automatically save changes
Settings Panel
Preferences
Email Alerts
Push Notifications
Two-Factor Auth
Disabled States
Disabled (Off)
Disabled (On)
Interactive Example
Feature Toggle
○ Feature is disabled
Switch Component
tsx
1import { ButtonHTMLAttributes, forwardRef } from "react";2import { cva, type VariantProps } from "class-variance-authority";3import { cn } from "@/lib/cn";45const switchVariants = cva(6 [7 "relative inline-flex shrink-0 cursor-pointer rounded-full border-2 border-transparent",8 "transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2",9 "focus:ring-blue-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",10 ],