Turn HTML checkbox inputs into fancy toggle switches with just a CSS class
APACHE-2.0 License
Turn HTML checkbox inputs into fancy toggle switches with just a CSS class
Demo: https://victornpb.github.io/vt-toggle/
You can turn a simple checkbox like this
Into this fancy toggle just by addind the vt-toggle
class
<input type="checkbox" class="vt-toggle">
Ok, cool! how can I get it?
npm install vt-toggle
bower install vt-toggle
https://unpkg.com/browse/[email protected]/css/vt-toggle.css
https://github.com/victornpb/vt-toggle/releases/
<link rel="stylesheet" type="text/css" href="bower_components/vt-toggle/css/vt-toggle.css">
<link rel="stylesheet" type="text/css" href="node_modules/vt-toggle/css/vt-toggle.css">
@import "node_modules/vt-toggle/scss/vt-toggle"; // NPM
@import "bower_components/vt-toggle/scss/vt-toggle"; // Bower
You can create your own classes using the SASS mixin.
@mixin vt-toggle($toggleWidth, $toggleHeight, $handleMargin, $roundness, $on-color, $off-color, $label)
Example:
@import "bower_components/vt-toggle/scss/vt-toggle";
$blue: #00f;
$red: #f00;
input.vt-toggle.accent {
@include vt-toggle(44px, 22px, 1px, 1, $blue, gray, false);
}
input.vt-toggle.danger {
@include vt-toggle(44px, 22px, 1px, 1, $red, gray, false);
}
Then you can use:
<input type="checkbox" class="vt-toggle accent"> I'm blue toggle
<input type="checkbox" class="vt-toggle danger"> I'm red toggle
class | Dimensions | Preview |
---|---|---|
xs | 18x22 | |
sm | 32x16 | |
md | 44x22 (default) | |
lg | 64x32 |
State | Preview |
---|---|
On | |
Off | |
Disabled (on) | |
Disabled (off) |