Toggle Switch

The ToggleSwitch component is used as 2-state switch for on/off or true/false data input.

Table of Contents

1. Default Selectors
2. HTML Example
3. Manual Constructor
4. Methods

Default Selectors

By default, all input elements with class="ui-toggleswitch" or data-role="toggleswitch" are displayed as toggle switches.
Additionally, select elements with class="ui-toggleswitch" or data-role="toggleswitch" are also displayed as toggle switches.

We recommend to use input selectors for toggle switch.

HTML Examples

Following examples show how to create toggle switch in multiple ways:

ToggleSwitch with input tag

<input type="checkbox" name="toggle-1" id="toggle-1" class="ui-toggleswitch"/>

<!-- disabled toggle switch -->
<input type="checkbox" name="toggle-2" id="toggle-2" class="ui-toggleswitch" disabled/>

ToggleSwitch with select tag

<select name="flip-1" id="flip-1" class="ui-toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>

Manual Constructor

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

<input type="checkbox" name="toggle-1" id="toggle-1" class="ui-toggleswitch"/>

<script>
   var toggleComponent = tau.widget.ToggleSwitch(document.getElementById("toggle-1"));
</script>

Methods

Summary

disable (  ) 

enable (  ) 

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	The disabled toggle switch.

Code example:

<select name="flip-1" id="flip-1" class="ui-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>

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	The enabled toggled switch.

Code example:

<select name="flip-1" id="flip-1" class="ui-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>

value

Gets a value of toggle switch.

Number value ( ) 

Since: 2.3

This method returns the element value. When toggle switch is in 'on' state, it returns 1. Otherwise, it returns 0.

Return value:

Type	Description
Number	The value (0 or 1) of element.

Code example:

<select name="flip-1" id="flip-1" class="ui-toggleswitch">
   <option value="off"></option>
   <option value="on"></option>
</select>
<script>
   var toggle = document.getElementById("flip-11"),
       toggleWidget = tau.widget.ToggleSwitch(toggle),
       toggleState = toggleWidget.value();
   console.log(toggleState);
</script>