Switch

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

inputs

toggle

selection

control

Preview

Variants

Basic switch control.

Code

TSX

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

export function SwitchDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Switch id="airplane-mode" />
      <Label htmlFor="airplane-mode">Airplane Mode</Label>
    </div>
  )
}

API Reference

Prop	Type	Default	Description
checked	boolean	-	Whether the switch is checked.
defaultChecked	boolean	-	Whether the switch is checked by default.
onCheckedChange	function	-	Event handler called when the checked state changes.
disabled	boolean	false	Whether the switch is disabled.

View Full Documentation