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