Animated Switch

An iOS-style toggle switch with a stretchy knob you can drag or flick.

@spectrumui/animated-switch

Email notificationsProduct updates and announcements

Public profileAnyone can view your profile

Weekly digestA summary in your inbox every Monday

Press and hold to see the knob stretch — or drag it

Installation

Usage

import { AnimatedSwitch } from "@/components/spectrumui/animated-switch"

<AnimatedSwitch defaultChecked onCheckedChange={(checked) => console.log(checked)} />

API Reference

AnimatedSwitch

Renders a single button element with role="switch" and aria-checked reflecting the state. Pass checked to control it from outside, or defaultChecked to let it manage its own state.

Prop	Type	Default	Description
`checked`	`boolean`	-	Controlled checked state. Leave undefined for uncontrolled usage
`defaultChecked`	`boolean`	`false`	Initial checked state when uncontrolled
`onCheckedChange`	`(checked: boolean) => void`	-	Fires with the next checked state whenever a toggle commits — by click, keyboard, drag or flick
`onIcon`	`React.ReactNode`	-	Icon shown inside the knob while on; crossfades with offIcon on toggle
`offIcon`	`React.ReactNode`	-	Icon shown inside the knob while off; crossfades with onIcon on toggle
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the switch — 32×18, 44×24 or 56×30 track
`disabled`	`boolean`	`false`	Disables pointer and keyboard interaction
`label`	`string`	`"Toggle"`	Accessible name of the switch
`className`	`string`	-	Additional classes merged with the default track styles

Examples

Icons and sizes

Knob icons crossfade on toggle

sm · md · lg