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.

• ui-flipswitch: The outermost container for flipswitch. Additionally, ui-flipswitch-active class will be applied in case flipswitch is in active
  • ui-flipswitch-on: On state label of flipswitch
  • ui-flipswitch-off: Off state label of flipswitch
  • ui-flipswitch-input: Input checkbox element for flipswitch

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>

The labels for the flipswitch are controlled by the onText and offText options.

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>

The labels for the flipswitch are controlled by the labels of the select element's option elements. The first option is used for the inactive, "off" state, and the second option is used for the active, "on" state.

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;
  }
}

Providing pre-rendered markup

You can improve the load time of your page by providing the markup that the flipswitch widget would normally create during its initialization.

By providing this markup yourself, and by indicating that you have done so by setting the attribute data-enhanced="true", you instruct the flipswitch widget to skip these DOM manipulations during instantiation and to assume that the required DOM structure is already present.

When you provide such pre-rendered markup you must also set all the classes that the framework would normally set, and you must also set all data attributes whose values differ from the default to indicate that the pre-rendered markup reflects the non-default value of the corresponding widget option.

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>

{
        "ui-flipswitch": "ui-shadow-inset ui-corner-all",
        "ui-flipswitch-on": "ui-shadow"
      }

$( ".selector" ).flipswitch({
  classes: {
    "ui-flipswitch": "highlight"
  }
});

// Getter
var themeClass = $( ".selector" ).flipswitch( "option", "classes.ui-flipswitch" );
 
// Setter
$( ".selector" ).flipswitch( "option", "classes.ui-flipswitch", "highlight" );

$( ".selector" ).flipswitch({
  corners: false
});

// Getter
var corners = $( ".selector" ).flipswitch( "option", "corners" );
 
// Setter
$( ".selector" ).flipswitch( "option", "corners", false );

$( ".selector" ).flipswitch({
  defaults: true
});

// Getter
var defaults = $( ".selector" ).flipswitch( "option", "defaults" );
 
// Setter
$( ".selector" ).flipswitch( "option", "defaults", true );

$( ".selector" ).flipswitch({
  disabled: true
});

// Getter
var disabled = $( ".selector" ).flipswitch( "option", "disabled" );
 
// Setter
$( ".selector" ).flipswitch( "option", "disabled", true );

$( ".selector" ).flipswitch({
  enhanced: true
});

// Getter
var enhanced = $( ".selector" ).flipswitch( "option", "enhanced" );
 
// Setter
$( ".selector" ).flipswitch( "option", "enhanced", true );

$( ".selector" ).flipswitch({
  offText: "Go"
});

// Getter
var offText = $( ".selector" ).flipswitch( "option", "offText" );
 
// Setter
$( ".selector" ).flipswitch( "option", "offText", "Go" );

$( ".selector" ).flipswitch({
  onText: "Stay"
});

// Getter
var onText = $( ".selector" ).flipswitch( "option", "onText" );
 
// Setter
$( ".selector" ).flipswitch( "option", "onText", "Stay" );

$( ".selector" ).flipswitch({
  theme: "b"
});

// Getter
var theme = $( ".selector" ).flipswitch( "option", "theme" );
 
// Setter
$( ".selector" ).flipswitch( "option", "theme", "b" );

$( ".selector" ).flipswitch({
  wrapperClass: "custom-class"
});

// Getter
var wrapperClass = $( ".selector" ).flipswitch( "option", "wrapperClass" );
 
// Setter
$( ".selector" ).flipswitch( "option", "wrapperClass", "custom-class" );

$( ".selector" ).flipswitch( "destroy" );

$( ".selector" ).flipswitch( "disable" );

$( ".selector" ).flipswitch( "enable" );

var isDisabled = $( ".selector" ).flipswitch( "option", "disabled" );

var options = $( ".selector" ).flipswitch( "option" );

$( ".selector" ).flipswitch( "option", "disabled", true );

$( ".selector" ).flipswitch( "option", { disabled: true } );

$( ".selector" ).flipswitch( "refresh" );

$( ".selector" ).flipswitch({
  create: function( event, ui ) {}
});

$( ".selector" ).on( "flipswitchcreate", function( event, ui ) {} );

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>flipswitch demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
    <h1>jQuery Mobile Example</h1>
  </div>
  <div role="main" class="ui-content">
    <div class="ui-field-contain">
      <form>
        <div data-role="fieldcontain">
          <label for="checkbox-based-flipswitch-0">Checkbox-based:</label>
          <input type="checkbox" id="checkbox-based-flipswitch-0" data-role="flipswitch">
        </div>
      </form>
    </div>
  </div>	
</body>
</html>