ui
GitHub

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 @9ui/switch

Usage

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

Examples

With Label

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

Disabled

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