Spring Switch

A big, springy on and off switch. Click it or swipe the thumb across, and choose how much it bounces.

Motion is on

pnpm dlx shadcn@latest add @latheui/spring-switch

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Spring Switch is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native button attributes, such as id, name and disabled.

Prop	Type	Default	Description
checked	boolean	—	Controlled state.
defaultChecked	boolean	false	Initial state when uncontrolled.
onCheckedChange	(checked: boolean) => void	—	Called when the switch is clicked, swiped or set from the keyboard.
damping	number	18	Spring damping. Lower is bouncier: 10 is playful, 32 calm.
icons	{ on?: ReactNode; off?: ReactNode }	—	Shown inside the thumb for each state.

A native button with role switch and aria-checked, so it is announced as on or off.
Always label it, with a label element pointing at its id or with aria-label.
Swiping is an extra. Everything it does can be done with a click or the keyboard.
Vertical scrolling still works when a swipe starts on the switch.

The thumb springs across with a stiffness of 380. Damping sets how far it overshoots and how often it bounces.
A swipe hands its speed to the spring, so a hard flick lands harder.
With reduced motion, the thumb jumps to its place.

<SpringSwitch className="data-[state=checked]:bg-chart-4" />

The track is sized from two CSS variables: the thumb and the padding around it.

<SpringSwitch className="[--thumb:2rem] [--pad:0.25rem]" />

API reference

Also accepts native button attributes, such as id, name and disabled.

Prop	Type	Default	Description
checked	boolean	—	Controlled state.
defaultChecked	boolean	false	Initial state when uncontrolled.
onCheckedChange	(checked: boolean) => void	—	Called when the switch is clicked, swiped or set from the keyboard.
damping	number	18	Spring damping. Lower is bouncier: 10 is playful, 32 calm.
icons	{ on?: ReactNode; off?: ReactNode }	—	Shown inside the thumb for each state.

Accessibility

A native button with role switch and aria-checked, so it is announced as on or off.
Always label it, with a label element pointing at its id or with aria-label.
Swiping is an extra. Everything it does can be done with a click or the keyboard.
Vertical scrolling still works when a swipe starts on the switch.