Flipswitch Widget

Flip switches

The flip switch is an alternative look to the checkbox or the two-option select menu. It can be toggled by a click or a swipe.

To create a flip switch add the attribute data-role="flipswitch" to a checkbox input or to a select which has two option values.

Checkbox-based flipswitch

Use the following markup to create a flipswitch based on a checkbox input:

<fieldset>
  <div data-role="fieldcontain">
    <label for="checkbox-based-flipswitch">Checkbox-based:</label>
    <input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch">
  </div>
</fieldset>

Select-based flipswitch

You can also create a flipswitch based on a select element:

<fieldset>
  <div data-role="fieldcontain">
    <label for="select-based-flipswitch">Select-based:</label>
    <select id="select-based-flipswitch" data-role="flipswitch">
      <option value="leave">Bye</option>
      <option value="arrive">Hi</option>
    </select>
  </div>
</fieldset>

Custom labels

You can customize the labels displayed by the flipswitch widget either using the onText and offText options if the widget is based on a checkbox, or using the text inside the first two option elements if the widget is based on a select.

The location of the text inside the two labels is specified manually in the flipswitch widget's structural CSS. Thus, if you use labels that are longer than "On" and "Off", you may have to override the default text placement using the following custom CSS:

.ui-flipswitch .ui-btn.ui-flipswitch-on {
  text-indent: -2.6em;
}
.ui-flipswitch .ui-flipswitch-off {
  text-indent: 1em;
}

Depending on your choice of labels, you may also have to provide custom CSS to override the default width for the flipswitch:

.ui-flipswitch {
  width: 5.875em;
}
.ui-flipswitch.ui-flipswitch-active {
  padding-left: 4em;
  width: 1.875em;
}
@media (min-width: 28em) {
  // Repeated from rule .ui-flipswitch above
  .ui-field-contain > label + .ui-flipswitch {
    width: 1.875em;
  }
}

The flipswitch widget adds a wrapper div around the input. In addition to the original element, the wrapper also contains two span elements where the two labels are stored. The first span is styled as a button with the text for the active state appearing outside the button's bounding box to the left. To make the flipswitch reachable by tabbing, you can add the tabindex="1" attribute to the first span.

In the example below, pre-rendered markup for a flipswitch is provided. The attribute data-corners="false" is explicitly specified, since the absence of the ui-corner-all class on the wrapper element indicates that the "corners" widget option is to be false.

<div class="ui-flipswitch ui-shadow-inset ui-bar-inherit">
  <span tabindex="1" class="ui-flipswitch-on ui-btn ui-shadow ui-btn-inherit">On</span>
  <span class="ui-flipswitch-off">Off</span>
  <input type="checkbox" data-role="flipswitch" data-enhanced="true" data-corners="false" name="flip-checkbox" class="ui-flipswitch-input">
</div>