Switches

The template includes a complete set of switches sizes, all focusable and controlable by keyboard. Using switches is quite easy: add the class switch to a radio or an input, it will be styled automatically:

Switch

<input type="checkbox" class="switch">

Note that all additional classes will also be added to the switch element (margins, colors...)

Reversed style

If you prefer the switches to work as on iOS, add the class reversed-switches to any of its ancestors:

Switch

<p class="reversed-switches">
	<input type="checkbox" class="switch">
</p>

If you want to reverse all switches, just add the class to the body element.

Customizing

The switches can be easily customized:

Texts

Custom texts

// Using separate attributes
<input type="checkbox" class="switch" checked data-text-on="YES" data-text-off="NO">

// Using option attribute
<input type="checkbox" class="switch" checked data-checkable-options='{"textOn":"YES","textOff":"NO"}'>

Active color

Red active
Blue active

// Use any class from the colors sets
<input type="checkbox" class="switch red-active">
<input type="checkbox" class="switch blue-active">

Size

Wide switch
Wider switch

// Wide switch
<input type="checkbox" class="switch wide">

// Wider switch
<input type="checkbox" class="switch wider">

Height

Medium size
Medium size - wide
Medium size - wider

// Medium switches, different sizes
<input type="checkbox" class="switch medium">
<input type="checkbox" class="switch medium wide">
<input type="checkbox" class="switch medium wider">

Tiny size
Mini size

// Tiny switch
<input type="checkbox" class="switch tiny">

// Switch mini
<input type="checkbox" class="switch mini">

Dynamic changes

If you change the value of the radios/checkboxes with javascript, you need to tell the styling plugin that it has changed: just fire a change event:

$(selector).change();

If the change event already has listeners, you can trigger the silent-change event instead

$(selector).trigger('silent-change');

Disabled state

As any input, switches may be disabled: disabled the original radio/checkbox or add the class disabled.

// Really disabled
<input type="checkbox" class="switch" disabled>

// Looking like it is disabled
<input type="checkbox" class="switch disabled">

Note that if you need to disable/enabled switches at runtime, you must use the template methods:

// Enable switch
$(selector).enableInput();

// Disable switch
$(selector).disableInput();

you may target either the original input or the switch