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 the class="ui-toggleswitch" or data-role="toggleswitch" are displayed as toggle switches.
Additionally, select elements with the 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 example shows how to create toggle switch in multiple way:

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	Return this.

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	Return this.

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. For ToggleSwitch, when toggle switch has 'on' state, it returns 1. Otherwise, it returns 0.

Return value:

Type	Description
Number	Returns 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>