Directory

← Back

custom-elements

Toggle switch custom element

Author

Contributors

Rating

npm version License Published on webcomponents.org

last-toggle-switch

Custom element toggle-switch designed to act like a checkbox. Includes accessibility features.

Demo

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:

<script src="node_modules/last-toggle-switch/dist/ToggleSwitch.dist.js"></script>

Depending upon your browser support requirements, you may need to include one or more Web Component polyfills.

HTML

<toggle-switch>Label text</toggle-switch>

<!-- Can be checked or disabled by default, just like a regular input -->
<toggle-switch checked disabled>Label text</toggle-switch>

CSS

Here are the custom properties available, along with their initial values, which enable you to style the shadow DOM.

--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.

document.querySelector('toggle-switch').addEventListener('change', (event) => {
    console.log(event)
})

Example implementation:

<script src="node_modules/last-toggle-switch/dist/ToggleSwitch.dist.js"></script>

<toggle-switch>Toggle Switch</toggle-switch>

<style>
    toggle-switch {
        --toggle-switch-track-color: #e8e2e2;
        --toggle-switch-knob-color: rebeccapurple;
        --toggle-switch-toggle-duration: 0.15s;
        color: #262626;
        transition: color 0.3s;
    }
    toggle-switch[checked] {
        --toggle-switch-track-color: #dfc5e6;
    }
    toggle-switch:focus {
        outline: none;
        color: rebeccapurple;
    }
</style>

Development

# installation
npm install

# dev mode
npm run dev

# build production
npm run build

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @polymer/lit-element#^0.6.5
Released
2019-01-15
Maturity
IMPORTED
License
Apache License 2.0

Compatibility

Framework
Browser
Browser Independent

custom-elements - Vaadin Add-on Directory

Toggle switch custom element custom-elements - Vaadin Add-on Directory
[![npm version](https://badge.fury.io/js/last-toggle-switch.svg)](https://badge.fury.io/js/last-toggle-switch) [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](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 ```
Online