Switch Overview
Starting with the R2 2023 release, Kendo UI will no longer ship Hybrid UI components. This means that the R2 2023 will be the last release to include Kendo Hybrid in the Kendo UI package. See full announcement in Kendo jQuery blog post. The last stable version that we recommend to use for Kendo Hybrid components is R3 2022 SP1.
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>