kcmr / liquid-switch

Web Component that acts as a checkbox with the appearance of a switch

<liquid-switch>

Demo and API docs

<liquid-switch> is a custom element that acts as a checkbox and has the appearance of a switch.

<liquid-switch checked>Switch label</liquid-switch>

Installation and usage

1. Install the component using Bower:

$ bower liquid-switch i -S

2. Import Web Components polyfill:

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

3. Import Custom Element:

<link rel="import" href="bower_components/liquid-switch/liquid-switch.html">

4. Use it!:

<liquid-switch checked>Switch label</liquid-switch>

Styling

The following custom properties and mixins are available for styling.

Note: all the values are unitless but border-radius.

Custom property	Description	Default
--liquid-switch-switch-background-color	Background color of the switch	#f5f5f5
--liquid-switch-switch-width	Switch width	40
--liquid-switch-switch-padding	Padding between switch and knob	3
--liquid-switch-border-radius	border-radius of the switch	10px
--liquid-switch-knob-color-on	Knob checked color	#7eb30f
--liquid-switch-knob-color-off	Knob unchecked color	#aeb5ae
--liquid-switch-knob-size	Size of the knob (width and height)	16
--liquid-switch-bar	Empty mixin applied to the switch	{}
--liquid-switch-knob	Empty mixin applied to the knob	{}