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

-

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

Import using SASS

@import "bower_components/vt-toggle/scss/vt-toggle";

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.blue {
    @include vt-toggle(44px, 22px, 1px, 1, $blue, gray, false);
}
input.vt-toggle.red {
    @include vt-toggle(44px, 22px, 1px, 1, $red, gray, false);
}

Then you can use:

<input type="checkbox" class="vt-toggle blue"> I'm blue toggle
<input type="checkbox" class="vt-toggle red"> 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) | |