Animated Toggle

A toggle switch component with smooth animations and multiple variants including morph and icon transitions.

~8.5 kB

Last updated: August 2, 2026

Installation

npx smoothui-cli add animated-toggle

Features

Three variants: default (smooth sliding), morph (shape changes during travel), and icon (transitions between icons)
Three sizes: sm, md, and lg
Controlled and uncontrolled modes
Smooth spring animations with Motion
Icon variant supports custom icons with crossfade and scale transitions
Morph variant animates borderRadius during travel
Full keyboard accessibility (Space/Enter to toggle)
Proper ARIA attributes with role="switch" and aria-checked
Respects reduced motion preferences
Disabled state support

Accessibility

Keyboard Interactions

Key	Description
`Space`	Toggles the switch on/off
`Enter`	Toggles the switch on/off

ARIA Attributes

Attribute	Element	Purpose
`role="switch"`	Button	Identifies the element as a toggle switch
`aria-checked`	Button	Reflects the current on/off state
`aria-label`	Button	Provides an accessible name via the `label` prop
`disabled`	Button	Indicates when the toggle is non-interactive

The role="switch" with aria-checked communicates the toggle state to assistive technologies.
Focus is visually indicated with a focus-visible ring style.

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, all spring animations, icon transitions, and morph effects are disabled instantly.