Flip Toggle Switch

Flip toggle switch

• Basics
• Options
• Methods
• Events

A binary "flip" switch is a common UI element on mobile devices that is used for binary on/off or true/false data input. You can either drag the flip handle like a slider or tap one side of the switch.

To create a flip toggle, start with a select with two options. The first option will be styled as the "on" state switch and the second will be styled as the "off" state so write your options accordingly. Set the for attribute of the label to match the ID of the input so they are semantically associated and wrap them in a div with the data-role="fieldcontain" attribute to group them.

<div data-role="fieldcontain">
	<label for="slider">Select slider:</label>
	<select name="slider" id="slider" data-role="slider">
		<option value="off">Off</option>
		<option value="on">On</option>
	</select>
</div>

The flip toggle switch is displayed like this:

Calling the switch plugin

This plugin will auto initialize on any page that contains a select with the data-role="slider" attribute. However, if needed you can directly call the slider plugin on any selector, just like any jQuery plugin:

$('select').slider();