Liquid-glass toggle with spring thumb motion, drag scrubbing, and grab-to-morph thumb — inspired by Apple.
The install command adds motion from the registry. Manual install: pnpm add motion
Liquid-glass toggle with spring thumb travel, grab-to-stretch interaction, and draggable scrubbing. Aesthetic inspired by Apple system controls. Supports controlled and uncontrolled modes, three sizes, and neutral or accent tones.
| Prop | Type | Default |
|---|---|---|
checkedControlled checked state. | boolean | — |
defaultCheckedInitial checked state when uncontrolled. | boolean | — |
onCheckedChangeCalled when the switch toggles. | (checked: boolean) => void | — |
labelOptional label rendered beside the switch. | ReactNode | — |
descriptionMuted helper text below the label. | ReactNode | — |
sizeTrack and thumb dimensions. | "sm" | "md" | "lg" | "md" |
toneOff/on fill and glow palette — neutral uses system green when on. | "neutral" | "accent" | "neutral" |
labelSideWhich side of the switch the label appears on. | "left" | "right" | "right" |
disabledDisables interaction and dims the control. | boolean | — |
classNameClasses on the switch button. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
Touch me
import { Switch } from "@/components/ui/switch"export default function Page() {
return <Switch defaultChecked label="Airplane Mode" />
}