A fluid animated switch with draggable thumb, smooth pill morphing on hover/press, and accessible keyboard support.
"use client"; import { Switch } from "../components/ui/switch"; export default function SwitchDisabledDemo() { return ( <div className="flex items-center justify-center min-h-screen bg-background"> <div className="transform scale-150 flex flex-col"> <Switch label="Off (disabled)" checked={false} onToggle={() => {}} disabled /> <Switch label="On (disabled)" checked={true} onToggle={() => {}} disabled /> </div> </div> ); }
Part of Fluid Functionalism — browse the full library on 21st.dev.