Switch
Animated on/off control with a spring thumb and smooth track tint. Built with Framer Motion and a native switch button.
Live preview
Flip the line · Spring carries the thumb · Track eases to green
Install
v0
Open in v0 with a ready page and the registry file to tweak motion or wiring with prompts.
Usage
Import as switch with an alias — it is a reserved word in JavaScript. See tile 05 for props and dependencies.
import { switch as Switch } from "@/components/ui/switch";
import { useState } from "react";
export function PressingToggle() {
const [on, setOn] = useState(true);
return (
<div className="flex items-center justify-between gap-4 max-w-xs">
<span className="text-sm text-muted-foreground">High press</span>
<Switch size="lg" checked={on} onCheckedChange={setOn} />
</div>
);
}API & dependencies
Controlled or uncontrolled boolean toggle; forwards ref to the underlying button.
checked (optional)
Boolean on/off state. Omit for an uncontrolled switch; pair with onCheckedChange for controlled usage.
onCheckedChange (optional)
Called with the next boolean when the user toggles. Use with checked for full control.
disabled (optional)
Disables the button, dims the control, and prevents toggling. Native disabled semantics apply.
size (optional)
Visual scale: sm (42×22 track), md (52×30, default), lg (64×36). Thumb travel and padding scale with each preset.
className (optional)
Merged onto the root button with cn(). Use for width constraints or alignment in forms.
framer-motion
Animates track backgroundColor and thumb x with a spring for the knob and an ease curve for the track.
Accessibility
Root is a native button with role="switch" and aria-checked reflecting checked. Focus ring uses ring tokens.
shadcn registry
Registry item lists framer-motion so the CLI installs the peer when you add the file.