It's easy peasy

Check out the demo. Works in IE11, Edge, Chrome, Firefox, and Safari.

<!-- Custom Elements v1 polyfill (2.7KB gzipped) -->
<script src="https://unpkg.com/@webcomponents/custom-elements@1.0.0-alpha.3"></script>

<!-- our custom element's source (6.5KB gzipped) -->
<script src="https://unpkg.com/shaf-toggle@1.0.9"></script>

Usage

<shaf-toggle>
  <input type="checkbox" name="smooooth" value="yes" checked />
</shaf-toggle>

Benefits

Because this wraps an existing <input type="checkbox" />:

• It is form-friendly.
• It doesn't mess with your event handlers.
• Your checkbox still works if JavaScript is turned off or fails to load.

Contributors

• aaronshaf
• ahstro
• This project inherits work from react-toggle.

See also

• shaf-button
• shaf-chart
• shaf-star-rating
• shaf-unified-diff
• shaf-timeago