a-simple-switch
Advanced tools
Simple, accessible, performant implementation of the Switch UI element.
Features:
To install the Switch code, simply import the Javascript and CSS files present
into your page as needed. Make sure to place the Javascript code at the bottom
of the <body> tag.
There are two ways to create a Simple Switch. On page load, the Simple Switch code will automatically detect checkboxes that are flagged as switches, and upgrade them, or you may manually instantiate a switch. See below for more details.
To have a switch be automatically upgraded, simply add the data-type attribute
to any checkbox-type input that you want upgraded, and set that attribute to the
value of simple-switch.
Example:
<input type="checkbox" name="my-checkbox" data-type="simple-switch" />
You may also manually instantiate a switch, which may be useful for
lazily-loaded UI elements or parts of the page. The Switch class which handles
upgrading and controlling Switches is available under the SimpleSwitch
namespace, and takes one parameter, element, which is a direct reference to
the HTMLElement checkbox to be upgraded.
Example:
<input type="checkbox" name="my-checkbox" id="my-checkbox" />
var myCheckbox = document.getElementById("my-checkbox");
new SimpleSwitch.Switch({
element: myCheckbox
});
FAQs
Vanilla JS/CSS Switch UI element
The npm package a-simple-switch receives a total of 283 weekly downloads. As such, a-simple-switch popularity was classified as not popular.
We found that a-simple-switch demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.