Flip Toggle Switch

A flip toggle switch is a selector for Boolean values (true or false, on or off), similar to a checkbox in functionality but with a radically different user interface. It is rendered as a visual switch that can be turned on or off by the user (tapping or dragging the switch).

This is the first form control that needs an explicit data-role: slider. It needs a select element with only two options as children: first the off/false value and then the on/true value:

  <label for="updated">Receive updates</label>
<select id="updated" name="updated" data-role="slider">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>

Without a field container, the flip toggle switch is rendered using the full page width. With a field container wrapping the content, it takes a more common visual approach, as seen in Figure 5-7.