Switch

Radix Switch with drag, flick snapping, size presets, and motion release curves.

switch
0px

Customize

Edit props; preview updates instantly.

Customize
Size
Animation
Flick velocity
0.35 px/ms

Props

Props accepted by Switch.

PropTypeDefaultDescription
checkedboolean—Controlled checked state. Pair with `onCheckedChange`. Leave undefined for uncontrolled.
defaultCheckedbooleanfalseInitial state when uncontrolled.
onCheckedChange(checked: boolean) => void—Fires on click, keyboard (Space / Enter), or drag release.
size"sm" | "md" | "lg""md"Visual size preset.
animation"spring" | "wobble" | "smooth" | "stretch""spring"Snap animation on release / state change. `spring` is balanced with mild overshoot; `wobble` is bouncy and underdamped; `smooth` is a clean ease-out tween with no overshoot; `stretch` is a spring with a horizontal squash keyframe so the thumb gels through travel.
disableDragbooleanfalseDisable click-and-drag interaction. Toggle becomes click / keyboard only.
flickVelocitynumber0.35Velocity threshold (px / ms) at release. Above this, the flick direction wins over position — a fast nudge toggles even before passing the midpoint.
thumbContentReactNode—Content rendered inside the thumb (icon, dot, etc.).
thumbClassNamestring—Extra class names merged onto the thumb.
disabledbooleanfalseGreys out the switch and blocks pointer / keyboard input.
requiredbooleanfalseMarks the switch as required for form submission.
namestring—Name forwarded to the hidden form input.
valuestring"on"Value sent with the form when checked.
classNamestring—Extra class names merged onto the root track.

Installation

Choose CLI for the one-line shadcn install, or copy the file manually.

npx shadcn@latest add https://2lazyui.com/r/switch.json

Usage

Import the component and drop it into a render.

demo.tsx12 lines
import { Switch } from "@/components/lazy-ui/switch";

export function Demo() {
  return (
    <div className="flex items-center gap-3">
      <Switch id="airplane" defaultChecked />
      <label htmlFor="airplane" className="text-sm text-neutral-200">
        Airplane mode
      </label>
    </div>
  );
}

Credits

Radix SwitchAccessible switch behavior and form integration.Motion for ReactRelease curves and drag snap animation.