Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    z-switchpublic

    banner

    Z-Switch

    Simple & stylish replacement for checkboxes, made with css only.

    Demo

    How to

    Installation

    npm i -S z-switch

    Import the css stylesheet

    // index.html
    <link rel="stylesheet" href="node_modules/z-switch/css/z-switch.css">

    OR use the sass one

    For example, you can include it via the sass includePath option of node-sass

    // npm scripts
    node-sass --include-path="node_modules/z-switch/sass/"  sass/style.sass css/style.css
    // style.sass
    @import 'z-switch'

    The default one :

    The simplest way to use it is with this html structure :

    <label class="z-switch">
        // text can go there
        <input type="checkbox">
        <div class="z-switch--container">
            <div class="z-switch--slider"></div>
        </div>
        // text can go there
        Hello, World!
    </label>

    screenshot1

    Default checked ?

    If you want the checkbox to be checked by default, add it the checked attribute.

    screenshot1bis

    ON & OFF labels

    It is possible to add some text on the switchs to illustrate theire states. (max 3 chars)

    For exemple here we will add "ON" & "OFF" labels :

    <label class="z-switch">
        // text can go there
        <input type="checkbox">
        <div class="z-switch--container">
            <div class="z-switch--slider" data-on="ON" data-off="OFF"></div>
        </div>
        // text can go there
    </label>

    screenshot3

    Different sizes

    Z-Switchs will always fit the parent font size, but it'zs possible to ask for smaller or bigger ones

    2 classes can be added to the z-switch element

    • z-switch-sm : smaller one (font-size * 2/3)
    • z-switch-lg : larger one (font-size * 4/3)

    screenshot2

    Different shapes

    Z-Switchs are circled by default, you can add these classes to change the shape :

    • z-switch-square

    screenshotSquare

    • z-switch-tictac

    screenshotTictac

    Different colors

    The classes way

    Two alternative colors are available for the switches, you can use it by adding classes

    • z-switch-color1

    screenshot4

    • z-switch-color2

    screenshot4bis

    The sass way

    You can override the sass variables to change the switches colors, default ones are :

    // default colors
    $z-switch-off    : #FF6059
    $z-switch-on     : #2ACB41
    $z-switch-slider : #FEFEFE
    $z-switch-text   : #FEFEFE
     
    // color1 alternative
    $z-switch-color1-off    : #CCCCCC
    $z-switch-color1-on     : #03A9F4
    $z-switch-color1-slider : #F4F4F4
     
    // color2 alternative
    $z-switch-color2-off    : #454846
    $z-switch-color2-on     : #454846
    $z-switch-color2-slider : #B4B6B5

    Here is an example with custom colors :

    $z-switch-off    : #ffbb59
    $z-switch-on     : #cb2aaa
    $z-switch-slider : #3ed421

    screenshot5

    Disabled

    When the checkbox is disabled, switches will become transparent and no action is possible on it:

    screenshot6

    Keywords

    none

    install

    npm i z-switch

    Downloadslast 7 days

    1

    version

    1.1.2

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar