Switch Overview

The Kendo UI Switch widget is used to display two exclusive choices.

When initialized, it shows the currently selected value. The Switch can be created from an input element of type checkbox.

Getting Started

Create the Switch

To create the Switch, use an HTML <input> element.

Example
<input id="switch" />

Initialize the Switch

To initialize the Switch, use a jQuery selector.

Example
$(document).ready(function() {
    $("#switch").kendoSwitch();
});

Features

Checking and Unchecking

The checked state of the Switch depends on the checked configuration option or the checked attribute of the widget element.

The example below demonstrates how to initialize the Kendo UI Switch from a checked input.

Example
<input type="checkbox" id="switch" checked="checked" />

<script>
    var switchInstance = $("#switch").kendoSwitch();
</script>

The example below demonstrates how to initialize a checked Kendo UI Switch using jQuery plugin syntax.

Example
<input type="checkbox" id="switch" />

<script>
    var switchInstance = $("#switch").kendoSwitch({
            checked: true
        });
</script>

Customization

Label Messages

The example below demonstrates how to customize the checked/unchecked messages of a Kendo UI Switch.

Example
<input type="checkbox" id="switch" />

<script>
    var switchInstance = $("#switch").kendoSwitch({
        messages: {
            checked: "YES",
            unchecked: "NO"
        }});
</script>

Enabled state

The example below demonstrates how to disable a Kendo UI Switch.

Example
<input type="checkbox" id="switch" />

<script>
    var switchInstance = $("#switch").kendoSwitch({
            enabled: false
        });
</script>

Readonly state

The example below demonstrates how to show a Kendo UI Switch in readonly state.

Example
<input type="checkbox" id="switch" />

<script>
    var switchInstance = $("#switch").kendoSwitch({
            readonly: true
        });
</script>

Reference

Existing Instances

To reference an existing Switch instance, use the jQuery.data() method. Once a reference has been established, use the API to control its behavior.

Keyboard Navigation

The user can focus the Switch through tabbing. The widget supports the following keyboard shortcut:

SHORTCUT DESCRIPTION
Space Toggles the checked state

See Also

Other articles on the Kendo UI Switch:

In this article
Not finding the help you need? Improve this article