Custom Switch

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

Customizing the Label Messages

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

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

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

See Also

• Basic Usage of the Switch (Demo)
• Using the API of the Switch (Demo)
• JavaScript API Reference of the Switch