Switch Overview
The Hybrid UI Switch widget is used to display two exclusive choices.
When initialized, it shows the currently selected value. Users are able to slide the control to reveal the second value. The mobile Switch can be created from an input element of type checkbox.
Getting Started
The mobile Kendo UI Application automatically initializes a mobile Switch for every element with the role data-attribute set to switch and present in the views/layouts markup. Alternatively, the Switch can be initialized using jQuery plugin syntax in the containing mobile View init event handler.
Initialize from Markup
The example below demonstrates how to initialize a Hybrid UI Switch based on a data-role attribute.
<input type="checkbox" data-role="switch" />
Initialize Using jQuery
The example below demonstrates how to initialize a Hybrid UI Switch by using jQuery plugin syntax.
<input type="checkbox" id="switch" />
<script>
var switchInstance = $("#switch").kendoMobileSwitch();
</script>
Features
Checking and Unchecking
The checked state of the mobile Switch depends on the checked configuration option or the checked attribute of the widget element.
The example below demonstrates how to initialize the Hybrid UI Switch from a checked input.
<input type="checkbox" id="switch" checked="checked" />
<script>
var switchInstance = $("#switch").kendoMobileSwitch();
</script>
The example below demonstrates how to initialize a checked Hybrid UI Switch using jQuery plugin syntax.
<input type="checkbox" id="switch" />
<script>
var switchInstance = $("#switch").kendoMobileSwitch({ checked: true });
</script>
Label Texts
The example below demonstrates how to customize the on/off labels of a Hybrid UI Switch.
<input type="checkbox" id="switch" />
<script>
var switchInstance = $("#switch").kendoMobileSwitch({ onLabel: "YES", offLabel: "NO" });
</script>