Switch Toggle
On/off toggle for settings and preferences that apply immediately. Use Checkbox instead when the choice is part of a form that still needs a submit step.
Live preview
open in new tab ↗"use client"
import * as React from "react"
import { cn } from "@/lib/utils"
import { Switch as SwitchPrimitive } from "radix-ui"
function Switch({ className, ...props }) {
return (
<SwitchPrimitive.Root
data-slot="switch"
className={cn("peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className)}
{...props}
>
<SwitchPrimitive.Thumb className="pointer-events-none block size-4 rounded-full bg-background transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0" />
</SwitchPrimitive.Root>
)
}
export { Switch }Block id: shadcn-switchreact-tailwind · drop-in
More input blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.