ui
XGitHub

Switch

A toggle control for switching between two states.

Docs
switch-demo.tsx
import { Switch } from "@/components/ui/switch"
 
export function SwitchDemo() {
	return <Switch />
}

Installation

npx shadcn@latest add https://9ui.dev/r/switch.json

Usage

Imports
import { Switch } from "@/components/ui/switch"
Anatomy
<Switch />

Examples

With Label

switch-with-label.tsx
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
 
export function SwitchWithLabel() {
	return (
		<div className="flex items-center gap-2">
			<Switch id="enable-notifications" />
			<Label htmlFor="enable-notifications">Enable notifications</Label>
		</div>
	)
}

Disabled

switch-disabled.tsx
import { Switch } from "@/components/ui/switch"
 
export function SwitchDisabled() {
	return <Switch disabled />
}