Switch

Toggle switch with smooth transition.

Preview

Off

Installation

npx drivn add switch

Usage

1 "use client"
2 
3 import { useState } from "react"
4 import { Switch } from "@/components/ui/switch"
5 
6 export default function Page() {
7   const [enabled, setEnabled] = useState(false)
8 
9   return (
10     <Switch
11       checked={enabled}
12       onChange={setEnabled}
13     />
14   )
15 }

API Reference

Prop	Type	Default	Description
`checked`	boolean	false	Whether the switch is toggled on
`onChange`	(checked: boolean) => void	—	Callback fired when the switch is toggled
`className`	string	—	Additional CSS classes to apply

1	"use client"
2
3	import { useState } from "react"
4	import { Switch } from "@/components/ui/switch"
5
6	export default function Page() {
7	const [enabled, setEnabled] = useState(false)
8
9	return (
10	<Switch
11	checked={enabled}
12	onChange={setEnabled}
13	/>
14	)
15	}