[](https://badge.fury.io/js/last-toggle-switch) [](https://opensource.org/licenses/Apache-2.0) [](https://www.webcomponents.org/element/last-toggle-switch) # last-toggle-switch Custom element toggle-switch designed to act like a checkbox. Includes accessibility features. [Demo](https://last-toggle-switch.netlify.com) ## Usage Install via npm with `npm install last-toggle-switch --save`. If you're using a module bundler simply `import "last-toggle-switch"`. Alternatively you can include it via a script tag: ` ` Depending upon your browser support requirements, you may need to include one or more [Web Component polyfills](https://www.webcomponents.org/polyfills). ### HTML ```html Label text Label text ``` ### CSS Here are the custom properties available, along with their initial values, which enable you to style the shadow DOM. ```css --toggle-switch-disabled-opacity: 0.5; --toggle-switch-toggle-duration: 0.3s; --toggle-switch-track-color: #cecece; --toggle-switch-track-shadow: none; --toggle-switch-track-border: none; --toggle-switch-track-height: 75%; --toggle-switch-knob-color: #333333; --toggle-switch-knob-shadow: none; --toggle-switch-knob-border: none; ``` ### JS The element itself emits a `change` event when the `checked` property changes. ```javascript document.querySelector('toggle-switch').addEventListener('change', (event) => { console.log(event) }) ``` ### Example implementation: ```html Toggle Switch ``` ## Development ``` # installation npm install # dev mode npm run dev # build production npm run build ```