This is a collection of the 10 best JavaScript and/or CSS libraries that transform the normal checkboxes, radio buttons, or even any elements into switch-style toggle buttons for a better user experience.
Originally Published Jan 13 2018, updated Jan 21 2025
See also:
1. Realistic iOS Switch In Pure CSS
Switchery is a simple jQuery Vanilla JavaScript plugin that converts the standard Html checkboxes into flat iOS style toggle switches with nice sliding effects.
2. el-checkbox
A pure CSS/CSS3 library to create custom checkboxes, radio buttons, and iOS-style toggle switches.
3. Smooth iOS Style Switch In Pure CSS – vc-toggle-switch.css
The vc-toggle-switch.css transforms the standard checkbox into an iOS-style toggle switch with a gooey effect on switch handle.
4. CSS3 Only iOS Switch Button
Yet another CSS/CSS3 solution to creating an iOS-style switch toggle button animated with CSS3 transforms and transitions.
5. Radio Button Based 3-state Toggle/Switch Control – slider.css
A CSS library that converts regular radio buttons into customizable toggles/switch controls.
6. Simple CSS Toggle Switch Library – a8z
A CSS library that adds elegant and customizable toggle switches to your web apps. Inspired by Toggle Switchy.
7. Creative Animated Toggle Switch In CSS
A pure CSS implementation that transforms a standard checkbox input into a creative, animated toggle switch.
8. Toggle Switchy
A minimal CSS (SCSS) library used to convert the standard radio buttons into accessible, nice-looking switch controls using CSS3 transitions and 3D transforms.
9. Smooth iOS Style Slide Switch Component – SlideOn
A tiny and fast UI component that converts normal checkbox inputs into customizable slide switches.
10. Accessible Performant Toggle Switch In Pure JavaScript
Just another JavaScript plugin for creating iOS- and Material Design-style on/off switches from regular checkbox elements.