Toggle Switch

Free

A switch whose knob rides a spring and stretches with its own speed.

Settings

Game preferences

Sound effectsClicks, coins and level-up chimes.

Haptic feedbackA short buzz on hits and rewards.

Cloud savesSync progress across devices.

CrossplayComing in the next update.

Customize

Size

Icons in knob

Color#ff784f

Installation

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

Works in any project set up with the shadcn CLI.

Install the dependency.
npm install motion
Copy the code from the Code tab into components/ui/toggle-switch.tsx.

Usage

import { ToggleSwitch } from "@/components/ui/toggle-switch";

<ToggleSwitch
  label="Sound effects"
  checked={settings.sound}
  onCheckedChange={(sound) => update({ sound })}
/>

Props

15 properties

Property	Type	Default	Description
checked	boolean	—	Controlled state. Leave it out to let the switch manage itself.
defaultChecked	boolean	false	Starting state when uncontrolled.
onCheckedChange	(checked: boolean) => void	—	Called with the new state on every toggle.
label	ReactNode	—	Clickable label next to the switch.
description	ReactNode	—	Smaller helper line under the label, linked with aria-describedby.
labelPosition	"start" \| "end"	"end"	Puts the label before the switch, as in a settings row.
size	"sm" \| "md" \| "lg"	"md"	Track and knob size.
color	string	"#ff784f"	Track color when on.
showIcons	boolean	false	Shows a check and a cross inside the knob.
disabled	boolean	false	Blocks interaction and dims the switch.
name	string	—	Form field name. Submits value only when on, like a native checkbox.
value	string	"on"	Value submitted with the form.
id	string	—	Id of the underlying input.
aria-label	string	—	Accessible name when there is no visible label.
className	string	—	Extra classes for the wrapper.

Dependencies: motion