ToggleSwitch

An on/off switch whose knob squishes on press and springs across.

Reduce motion everywhereHaptic feedback

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/toggle-switch.json

React
import ToggleSwitch from "@/components/fx/toggle-switch"

<ToggleSwitch label="Haptic feedback" checked={on} onCheckedChange={setOn} />

A button with role="switch" and aria-checked, labelled by its visible label.
Space and Enter toggle it; visible focus ring.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) moves the knob without the spring.

Prop	Type	Default	Description
label	ReactNode	—	Visible label and accessible name.
checked	boolean	—	Controlled state.
defaultChecked	boolean	false	Initial state.
onCheckedChange	(checked: boolean) => void	—	Called on toggle.