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.

Note
selector with select[data-role="slider"] has been DEPRECATED since Tizen 2.4.
To support Backward compatibility, please import tau.support-2.3.js.

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:

HTML code:

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

JS code:

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

Methods

Summary

Method Description 
ToggleSwitch disable()

Disables the toggle switch.

 
ToggleSwitch enable()

Enables the toggle switch.

 
number value()

Gets toggleswitch state 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:

HTML code:

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

JS code:

var toggle = document.getElementById("flip-11"),
    toggleWidget = tau.widget.ToggleSwitch(toggle);
toggleWidget.disable();
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:

HTML code:

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

JS code:

var toggle = document.getElementById("flip-11"),
    toggleWidget = tau.widget.ToggleSwitch(toggle);
toggleWidget.enable();
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:

HTML code:

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

JS code:

var toggle = document.getElementById("flip-11"),
    toggleWidget = tau.widget.ToggleSwitch(toggle),
    toggleState = toggleWidget.value();
console.log(toggleState);