Switch

A toggle switch for on/off settings.

Notifications

import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'

export default function SwitchDemo() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="switch-demo-notifications" defaultChecked />
      <Label htmlFor="switch-demo-notifications">Notifications</Label>
    </div>
  )
}

Built on Base UI

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/switch.json

Needs a React + Tailwind project set up with shadcn. Copies the component source straight into your project, so you can edit it.

Switch imports cn() from lib/utils.ts — add it too if you don't have it yet:

import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Usage

import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'

<div className="flex items-center gap-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Notifications</Label>
</div>

Examples

Disabled

Disabled, off

Disabled, on

import { Switch } from '@/components/ui/switch'
import { Label } from '@/components/ui/label'

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

API Reference

Name	Type	Default	Description
checked	boolean	—	Controlled checked state. Use defaultChecked for uncontrolled.
defaultChecked	boolean	false	Initial checked state (uncontrolled).
disabled	boolean	false	Ignores user interaction.
onCheckedChange	(checked: boolean) => void	—	Called when the switch is activated or deactivated.