RSK World - Switch Toggle Component | Custom Toggles, Animations, Themes, Gestures | RSK World

Switch Toggles Sizes & Themes Animations & Gestures Form & Config Vanilla JS

Switch Toggle Component is a comprehensive switch/toggle library with smooth animations, multiple sizes (small, medium, large, extra large), color variations (primary, success, warning, danger, purple, dark), icon support, and animated variants (bounce, rotate, pulse). Includes advanced animations (neon, liquid, particle, magnetic, holographic, glitch, fire, water, matrix, aurora, cyberpunk, steampunk, quantum), theme system (light, dark, cyberpunk, neon, retro, nature, ocean, sunset, minimal), config panel, gesture controls (swipe, tap, long-press, double-tap, Konami code), form integration, live status display, and localStorage. Files: index.html, styles.css, animations.css, themes.css, advanced.css, script.js, config.js, utils.js, gestures.js, README.md. By rskworld.in.

If you find this Switch Toggle Component project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Switch Toggle Component

Switch Styles & Animations

Base switch in styles.css: hidden checkbox + label with ::before thumb, transition and :checked state. Size classes (switch-small, switch-medium, switch-large, switch-xl), color classes (switch-primary, switch-success, etc.), icon switches (switch-with-icons). animations.css: bounce, rotate, pulse; advanced.css: neon, liquid, particle, magnetic, holographic, glitch, fire, water, matrix, aurora, cyberpunk, steampunk, quantum.

styles.css: .switch, .switch::before, :checked + .switch
animations.css: switch-bounce, switch-rotate, switch-pulse
advanced.css: switch-neon, switch-liquid, switch-particle, etc.
Color variants: primary, success, warning, danger, purple, dark

Project Structure & Files

Root: index.html (demo with basic, sizes, colors, icons, animated, status, form, advanced animations, theme switcher, config), styles.css (layout, switch base, sizes, colors, icons), animations.css, themes.css (CSS variables, data-theme), advanced.css (config panel, controls), script.js (handlers, status, form, ripple, a11y, SwitchToggle API), config.js (SwitchToggleConfig), utils.js (SwitchToggleUtils), gestures.js (GestureManager). No build step.

index.html, styles.css, animations.css, themes.css, advanced.css
script.js, config.js, utils.js, gestures.js, README.md
No build step – open index.html or static server
Inter font, Font Awesome 6; zero dependencies

Theme System & Config

themes.css: :root and [data-theme="light|dark|cyberpunk|neon|retro|nature|ocean|sunset|minimal"] with --theme-bg-*, --theme-text-*, --switch-bg-on/off. config.js: SwitchToggleConfig with animation, theme, sound, haptic, gestures, analytics, accessibility, storage; load/save localStorage, export/import JSON, observers, system detection (reduced motion, prefers-color-scheme, touch).

9 themes via data-theme and CSS variables
SwitchToggleConfig: get/set path, observers, validate, createConfigPanel()
Theme switcher UI in index.html
Follow system dark/light option

Gestures & Keyboard

gestures.js: GestureManager – touch (swipe left/right to toggle, tap, long-press, double-tap), mouse fallback, keyboard (type "switch" to toggle all, "theme" to cycle, Konami ↑↑↓↓←→←→BA). utils.js: Ctrl+Shift+S toggle all, Ctrl+Shift+R reset, Ctrl+Shift+E export, Ctrl+Shift+I import. script.js: Enter/Space on focused switch, ARIA, live region announcements.

Swipe threshold, long-press 500ms, double-tap 300ms
Keyboard shortcuts in utils.js
Konami code and type-to-toggle in gestures.js
Accessibility: Tab, Enter, Space, aria-live

Demo Sections & Form

index.html: Basic Switches, Size Variations, Color Variations, Switches with Icons, Animated Switches, Live Status Display (WiFi, Dark Mode, Notifications), Form Integration Example (email notifications, 2FA, profile visibility), Advanced Animations, Theme System, Advanced Features (gesture hints, shortcuts, config/analytics/export/import buttons). script.js: saveSettings/loadSettings to localStorage, showNotification.

Live status: updateStatusDisplay(), toggleDarkMode()
Form: settings-form submit → saveSettings(), applySavedSettings() on load
Custom event switchToggle; SwitchToggle.getAllStates, setState, resetAll
Ripple effect and hover animations

What You Get

Static HTML/CSS/JS: index.html, styles.css, animations.css, themes.css, advanced.css, script.js, config.js, utils.js, gestures.js, README.md. No build step. Open index.html or serve folder.

Complete source – all CSS, JS, and single demo HTML
No build step – open index.html or static server
README.md with usage, API, customization, a11y
Technologies: HTML5, CSS3, Vanilla JS. © 2026 RSK World.

Usage

Open index.html. Use theme switcher, config panel, gesture controls, and keyboard shortcuts. Customize via CSS variables (--switch-width, --switch-active-color, etc.) or add new theme/color classes. API: SwitchToggle.getAllStates(), setState(id, state), resetAll(), saveSettings(), loadSettings().

index.html – single demo with all sections
CSS variables in themes.css and styles.css
Accessibility: labels, keyboard, reduce motion, high contrast
Author: RSK World | rskworld.in

Project Features

Switch toggles: 4 sizes, 6 color variants, icon support, bounce/rotate/pulse and 12+ advanced animations, 9 themes, config system, gestures (swipe, tap, long-press, double-tap, Konami), form integration, live status, localStorage, custom events, full keyboard and screen reader support.

Switches – sizes, colors, icons, simple and advanced animations
Theme system – light, dark, cyberpunk, neon, retro, nature, ocean, sunset, minimal
Config – animation, sound, haptic, gestures, analytics, storage
A11y – ARIA, keyboard, reduced motion, focus visible

Credits & Acknowledgments

Switch Toggle Component by RSK World. Custom switch toggles with smooth animations, multiple sizes and themes, gestures and config, form integration and accessibility for learning vanilla JS and UI design.

Switch Toggle Component – animations, themes, gestures, config
RSK World – Project creator and educational platform
Author: Molla Samser (Founder - RSK World)
Website: https://rskworld.in
Email: hello@rskworld.in | support@rskworld.in | +91 93305 39277
© 2026 RSK World. All rights reserved.