Animated Toggle
A toggle switch component with smooth animations and multiple variants including morph and icon transitions.
Installation
npx smoothui-cli add animated-toggleFeatures
- 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 |
Screen Reader
- The
role="switch"witharia-checkedcommunicates the toggle state to assistive technologies. - Focus is visually indicated with a focus-visible ring style.
Reduced Motion
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.