victornpb / vt-toggle

Turn HTML checkbox inputs into fancy toggle switches with just a CSS class

vt-toggle

Turn HTML checkbox inputs into fancy toggle switches with just a CSS class

Demo: https://victornpb.github.io/vt-toggle/

What is this?

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

Install

Ok, cool! how can I get it?

NPM

npm install vt-toggle

Bower

bower install vt-toggle

CDN

https://unpkg.com/browse/vt-toggle@1.0.1/css/vt-toggle.css

Download

https://github.com/victornpb/vt-toggle/releases/

Importing into project

Import using link

<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 using SASS

@import "node_modules/vt-toggle/scss/vt-toggle"; // NPM
@import "bower_components/vt-toggle/scss/vt-toggle"; // Bower

Creating your own classes using SASS

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

---

Default styles

Default Sizes:

class	Dimensions	Preview
xs	18x22
sm	32x16
md	44x22 (default)
lg	64x32

States

State	Preview
On
Off
Disabled (on)
Disabled (off)