Foundations

Components

A highly realistic toggle controller that mimics the organic mechanical inertia of native iOS controls.

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

A basic on/off toggle switch. Drag the thumb left or right to feel the spring physics.

Background

Switches can be disabled to prevent user interaction.

Background

The best practices when using toggle switches.

Use toggle switches only for binary states that take effect immediately.
Pair each switch with a clear text label indicating what it controls. The List component provides a purpose-built slot for this pattern.
Position the switch toggle to the right side of list rows or text labels.
Disable input actions programmatically when required parent fields are empty. For irreversible actions, show a Dialog confirmation instead.

The props available for the Switch component.

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.
liquidGlass	boolean	false	Enables physical liquid glass refraction (Chromium only).
refractiveIndex	number	1.5	IOR of glass curvature. Range 1.0 (air) to 2.4.
bezelWidth	number	10	Depth of bezel refraction zone (px).
displacementScale	number	15	Intensity of physical refraction offset.

Give feedback