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 following example 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 following example demonstrates how to initialize a checked Kendo UI Switch by using the jQuery plugin syntax.

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

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

Customization

Label Messages

The following example demonstrates how to customize the checked and unchecked messages of the Switch.

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

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

Enabled State

The following example demonstrates how to disable the Switch.

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

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

Read-Only State

The following example demonstrates how to render the Switch in its read-only state.

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

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

Custom Switch Layout

With the new Switch variables introduced in R1 2019 release, the default styling of the Switch component for each of the Sass-based themes can be modified to match the desired custom layout.

For more information and examples, refer to the Custom Switch Component Layout article, which demonstrates how to override the default Sass values in order to achieve any of the predefined custom layouts.

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

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