Switch

Installation

Run the following command:

Update your imports:

import { Switch } from "@/components/ui/switch"

Usage

import { Switch } from "@/components/ui/switch";
 
export default function Home() {
  return (
    <Switch />
  );
}

Usage with Labels and Icons

import { Switch } from "@/components/ui/switch";
 
export default function Home() {
  return (
    <Switch 
      id="theme-mode" 
      showLabels 
      labelOn="Light" 
      labelOff="Dark"
      showIcons
    />
  );
}

Props

Prop	Type	Default	Description
variant	`default` \| `lg` \| `outline`	`default`	Style variant of the switch
disabled	`boolean`	`false`	Whether the switch is disabled

Radix UI Props

The Switch component is built on Radix UI's Switch primitive and supports all its props:

Switch Root Props

checked: boolean - The controlled state of the switch
defaultChecked: boolean - The default state when uncontrolled
onCheckedChange: (checked: boolean) => void - Event handler called when the checked state changes
name: string - The name of the switch, used when submitting a form
value: string - The value of the switch, used when submitting a form
required: boolean - When true, indicates that the user must check the switch
disabled: boolean - When true, prevents the user from interacting with the switch

HTML Attributes

The component also supports standard HTML button attributes:

id
aria-* attributes
data-* attributes
Event handlers like onFocus, onBlur, etc.

This ensures proper accessibility, keyboard navigation, and form integration.