All Projects → aaronshaf → shaf-toggle

aaronshaf / shaf-toggle

Licence: MIT license
Elegant, accessible toggle element. Upgrades existing <input type="checkbox" />

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to shaf-toggle

ld-redux
A library to integrate launch darkly with react redux
Stars: ✭ 33 (+17.86%)
Mutual labels:  toggle
PygameWidgets
A module for use with Pygame. Includes fully customisable buttons, textboxes, sliders and many more, as well as the ability to create and run animations on these widgets.
Stars: ✭ 34 (+21.43%)
Mutual labels:  toggle
Accordion.JS
Accordion.JS: Free jQuery Accordion plugin
Stars: ✭ 34 (+21.43%)
Mutual labels:  toggle
widgets
🚀 Dojo - UI widgets.
Stars: ✭ 82 (+192.86%)
Mutual labels:  custom-elements
g-emoji-element
Backports native emoji characters to browsers that don't support them by replacing the characters with fallback images.
Stars: ✭ 112 (+300%)
Mutual labels:  custom-elements
wp-showhide
Allows you to embed content within your blog post via WordPress ShortCode API and toggling the visibility of the cotent via a link.
Stars: ✭ 21 (-25%)
Mutual labels:  toggle
lego
🚀 Web-components made lightweight & Future-Proof.
Stars: ✭ 69 (+146.43%)
Mutual labels:  custom-elements
typing-effect-element
A custom element that shows text as if it were being typed
Stars: ✭ 81 (+189.29%)
Mutual labels:  custom-elements
inclusive-elements
Accessible, lightweight, unstyled implementations of common UI controls.
Stars: ✭ 17 (-39.29%)
Mutual labels:  custom-elements
CompositeToggle
Composite toggle system for unity
Stars: ✭ 38 (+35.71%)
Mutual labels:  toggle
11ty-web-component-generator
Use the power of 11ty to generate web components (custom elements).
Stars: ✭ 51 (+82.14%)
Mutual labels:  custom-elements
pidswallow
A swallower script using process hierarchy.
Stars: ✭ 40 (+42.86%)
Mutual labels:  toggle
MultiToggleButton
Multiple state tap-to-toggle UIButton (like old camera flash button)
Stars: ✭ 81 (+189.29%)
Mutual labels:  toggle
focus-trap
A lightweight web component that traps focus within a DOM node
Stars: ✭ 44 (+57.14%)
Mutual labels:  custom-elements
RevealLayout
揭示效果布局,可以指定2个子布局,以圆形揭示效果切换选中状态
Stars: ✭ 118 (+321.43%)
Mutual labels:  toggle
react-slide-toggle
React component re-implementation for jQuery.slideToggle feature
Stars: ✭ 42 (+50%)
Mutual labels:  toggle
ng-toggle
Bootstrap-styled Angular Toggle Component
Stars: ✭ 14 (-50%)
Mutual labels:  toggle
lazy-image
Lazily load your images with <lazy-image> custom element
Stars: ✭ 42 (+50%)
Mutual labels:  custom-elements
toggle-icon
toggle-icon is a custom element created with Polymer. It provides an extremely powerful and customizable switch that looks like a paper-icon-button.
Stars: ✭ 21 (-25%)
Mutual labels:  custom-elements
dash-video-element
A custom element (web component) for playing DASH (Dynamic Adaptive Streaming over Http) videos.
Stars: ✭ 12 (-57.14%)
Mutual labels:  custom-elements

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/[email protected]"></script>
<!-- our custom element's source (6.5KB gzipped) -->
<script src="https://unpkg.com/[email protected]"></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

See also

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].