Switch

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

Dark Mode

import { Switch } from "@chadcn/ui"
import { Label } from "@/components/ui/label"
import { useTheme } from "next-themes"

export function SwitchDemo() {
  const { setTheme, resolvedTheme } = useTheme()
  const isDark = resolvedTheme === "dark"

  return (
    <div className="flex items-center gap-2">
      <Switch
        id="dark-mode"
        checked={isDark}
        onCheckedChange={(checked) =>
          setTheme(checked ? "dark" : "light")
        }
      />
      <Label htmlFor="dark-mode">Dark Mode</Label>
    </div>
  )
}

How it works

Click-to-toggle is disabled to prevent accidental state changes. On desktop, the thumb responds to browser window movement via inertia. On mobile, tilting the device applies gravity through the gyroscope.
The thumb bounces off the edges with realistic physics, providing clear visual feedback about the toggle boundaries.

Installation

Coming SoonPackage not yet published on npm.

pnpm add @chadcn/ui

Usage

import "@chadcn/ui/styles.css"
import { Switch } from "@chadcn/ui"

<Switch />

Coming SoonPackage not yet published on npm.

Examples

Disabled

Use the disabled prop to disable the switch.

Disabled

import { Switch } from "@chadcn/ui"
import { Label } from "@/components/ui/label"

export function SwitchDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="disabled-switch" disabled />
      <Label htmlFor="disabled-switch">Disabled</Label>
    </div>
  )
}

API Reference

See the Radix Switch documentation.