Switch

A highly realistic toggle controller that mimics the organic mechanical inertia of native iOS controls. Supports direct dragging, finger pressure scaling, and spring physics.

Drag the thumb left/right to feel the spring squeeze physics!

State: Unchecked

Configuration

Toggle Programmatically Trigger state via external binding

Disabled State Disables interaction while dimming state

Installation

npx shadcn-svelte@latest add https://ui.grgurevic.click/r/switch.json

Svelte Composition Code

<script lang="ts">
	let checked = $state(false);
	import { Switch } from "$lib/components/ui/switch";
</script>

<Switch bind:checked={checked} />

API & Props Reference

Prop	Type	Default	Description
checked	boolean	false	Two-way bindable state property indicating toggled state.
disabled	boolean	false	Disables clicks and pointer listeners while opacity-scaling down.