Setup:


A flip switch is actually a checkbox or select form element that has data-role="flipswitch" added to it:

<label for="flipsit">Checkbox Flip Switch</label>
<input name="flipsit" id="flipsit" type="checkbox" data-role="flipswitch">

<label for="flipsit1">Select Flip Switch:</label>
<select name="flipsit1" id="flipsit1" data-role="flipswitch">
<option value="off">Off</option>
<option value="on">On</option>
</select>

By wrapping the flip switch in a field container the label will be positioned on the side:

<div class = "ui-field-contain">
<label for="flipsit">Option:</label>
<input name="flipsit" id="flipsit" type="checkbox" data-role="flipswitch">
</div>v>

Custom labels can be used with both checkbox and select flip switches:

<div class = "ui-field-contain">
<label for="flipsit">Option:</label>
<input name="flipsit" id="flipsit" type="checkbox" data-role="flipswitch">
</div>v>

<div class = "ui-field-contain">
<label for="flipsit">Select Flip Switch:</label>
<select name="flipsit" id="flipsit9" data-role="flipswitch">
<option value="off">No!</option>
<option value="on">Yes!</option>
</select>
</div>>


Attributes:


data-mini: true | false

<select name="flipsit" id="flipsit" data-role="flipswitch" data-mini="true">


data-role: none | flipswitch

<select name="flipsit" id="flipsit" data-role="none">

Overrides the automatic enhancement so the flip switch reverts to a select list or checkbox.


data-theme: swatch letter from a to z

<label for="flipsit">Option:</label>
<select name="flipsit" id="flipsit" data-role="slider" data-theme="b">
<option value="off">Off</option>
<option value="on">On</option>
</select>

Themes the switch


data-track-theme: swatch letter from a to z

<label for="flipsit">Option:</label>
<select name="flipsit" id="flipsit" data-role="slider" data-track-theme="a">
<option value="off">Off</option>
<option value="on">On</option>
</select>

Themes the switch track.