Flip Toggle Switch

The flip toggle switch component is a common UI element on mobile devices, used for binary on/off or true/false data input.

The flip toggle switch component shows a 2-state switch on the screen. If defined with a select element type with option element, the toggles can have labels. You can drag or flip the handle, or tap one side of the switch.

Toggles defined with the select element are supported for backward compatibility.

Table of Contents

  1. Default Selectors
  2. Manual Constructor
  3. Options
  4. Methods

Default Selectors

By default, all input elements with the data-role="toggleswitch" attribute or the select elements with the data-role="slider" or data-role="toggleswitch" attribute are displayed as toggle switches.

To add a toggle switch component to the application:

<input type="checkbox" data-role="toggleswitch">

<input type="checkbox" id="checkbox-1" data-role="toggleswitch"/>
<label for="checkbox-1"></label>

<select name="flip-11" id="flip-11" data-role="slider">
   <option value="off"></option>
   <option value="on"></option>
</select>

<select name="flip-11" id="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>

<select name="flip-11" id="flip-11" data-role="toggleswitch">
   <option value="off">off option</option>
   <option value="on">on option</option>
</select>

Manual Constructor

To manually create a toggle switch component, use the component constructor from the tau namespace:

<select id="toggle" name="flip-11" id="flip-11" data-role="toggleswitch" data-mini="true">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   var toggleElement = document.getElementById("toggle"),
       toggle = tau.widget.ToggleSwitch(toggleElement);
</script>

Options

The following table lists the options for the toggle switch component.

Option Input type Default value Description
data-disabled boolean false Starts the component as enabled or disabled.
data-highlight boolean true If set, the toggle switch can be highlighted.
data-inline boolean | null false If the value is "true", the toggle switch has a css property.
data-mini boolean | null false Sets the size of the toggle switch.

Methods

Summary

Method Description
ToggleSwitch disable (  ) 

Disables the toggle switch.

ToggleSwitch enable (  ) 

Enables the toggle switch.

ToggleSwitch refresh (  ) 

Refreshes a toggle switch markup.

string value (  ) 

Gets or sets a value.

disable

Disables the toggle switch.

ToggleSwitch disable ( ) 

The method sets disabled attribute on for the toggle switch and changes the look of the toggle switch to the disabled state.

Return value:

Type Description
ToggleSwitch Return this.

Code example (TAU API RECOMMENDED):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   var toggle = document.getElementById("flip-11"),
       toggleWidget = tau.widget.ToggleSwitch(toggle),
   toggleWidget.disable();
</script>

Code example (jQuery API support for backward compatibility):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   $("#flip-11").toggleswitch("disable");
</script>
enable

Enables the toggle switch.

ToggleSwitch enable ( ) 

The method removes the disabled attribute from the toggle switch and changes the look of the toggle switch to the enabled state.

Return value:

Type Description
ToggleSwitch Return this.

Code example (TAU API RECOMMENDED):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   var toggle = document.getElementById("flip-11"),
       toggleWidget = tau.widget.ToggleSwitch(toggle),
   toggleWidget.enable();
</script>

Code example (jQuery API support for backward compatibility):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   $("#flip-11").toggleswitch("enable");
</script>
refresh

Refreshes a toggle switch markup.

ToggleSwitch refresh ( ) 

The method rebuilds the DOM structure of the toggle switch component. It must be called after you manually change the HTML attributes of component's DOM structure.

The method is called automatically after any component option is changed.

Return value:

Type Description
ToggleSwitch Return this.

Code example (TAU API RECOMMENDED):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   var toggle = document.getElementById("flip-11"),
       toggleWidget = tau.widget.ToggleSwitch(toggle),
   toggleWidget.refresh();
</script>

Code example (jQuery API support for backward compatibility):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   $("#flip-11").toggleswitch("refresh");
</script>
value

Gets or sets a value.

string value ( ) 

Since: 2.3

This method returns the element value or sets the element value.

Return value:

Type Description
string In the get mode, returns the element value or element.

Code example (TAU API RECOMMENDED):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   var toggle = document.getElementById("flip-11"),
       toggleWidget = tau.widget.ToggleSwitch(toggle),
       // Value contains the index of the select element
       value = toggleWidget.value();
   // Sets the index for the toggle
   toggleWidget.value("1");
</script>

Code example (jQuery API support for backward compatibility):

<select id="flip-11" name="flip-11" data-role="toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   // Value contains the index of the select element
   $("#flip-11").toggleswitch("value");
   // Sets the index for the toggle
   $("#flip-11").toggleswitch("value", "1");
</script>