Animated Switch

Overview

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

This control component is intended for interfaces that need an iOS-style toggle switch with a stretchy knob you can drag or flick, settings screens, and preference panels. Its implementation is provided as editable source so the final behavior and styling stay inside your project.

Technologies

React

TypeScript

Tailwind CSS

Motion

Detected package dependencies: framer-motion.

@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

Use cases

interfaces that need an iOS-style toggle switch with a stretchy knob you can drag or flick
settings screens
preference panels

Features

Copy-paste source that remains in your repository
TypeScript source included with the component
Tailwind CSS classes editable in the component source
Animation implemented with Motion
Responsive Tailwind variants present in the source
Reduced-motion handling present in the source

Accessibility

The source includes ARIA attributes or roles; preserve them when customizing the component.
The source checks reduced-motion preferences or includes motion-reduce styles.
Test focus order, keyboard operation, labels, contrast, and screen-reader output in the final application context.

Customization

Edit the Tailwind utility classes in the copied source to match your spacing, color, and typography tokens.
Use the documented className surface for local layout adjustments, then edit the source for structural changes.
Adjust Motion transitions in the source and keep the reduced-motion behavior aligned with the final interaction.

Autosize Textarea

A textarea that automatically grows and shrinks to fit its content.

Button

A set of pre-designed buttons including gradient, outline, loading, and icon styles.

Datetime Picker

A date and time picker built on shadcn/ui with no extra dependencies.

Dual Range Slider

A slider with two draggable thumbs for selecting a range of values.

Topic guides

See how this component fits into broader interface patterns, implementation decisions, and working examples.

Motion Components Pricing Sections Authentication Components

Animated Switch FAQ

Is Animated Switch free to use in commercial projects?

Yes. The public Animated Switch source is available under the Apache License 2.0, including for commercial use, subject to the LICENSE terms.

How do I install Animated Switch?

Run npx shadcn@latest add @spectrumui/animated-switch. The page also exposes the source for manual installation.

Does Animated Switch require Motion?

Yes. Motion usage was detected in the documented source or registry dependencies for Animated Switch.

Does Animated Switch use shadcn/ui or Radix UI?

No shadcn/ui or Radix UI dependency was detected in the documented Animated Switch source.

Can I use Animated Switch in Next.js?

The documented React source is used in this Next.js application. Keep its use client directive when copying it into the App Router. Install the detected dependencies and verify any application-specific data or image configuration.

What accessibility checks should I run for Animated Switch?

The source includes ARIA markup, reduced-motion handling. Test the finished interface with keyboard and screen-reader workflows.