Switches display a couple of exclusive choices so that users can toggle the state of an item on and off.

Usage Guidelines

The Telerik and Kendo UI Switch requires you to follow some basic principles when using the component.


The Switch is used for displaying two exclusive choices and can act as a replacement for the RadioButton for a single choice. When in a group, the Switch can be used for options that are not mutually exclusive.

Use the Switch for a list of options that are non-conflicting.
Avoid using the Switch for a list of mutually exclusive options.

Text Label

A corresponding text label, or hint, is an obligatory element when using the Switch. It must be clear to the user at all times what the Switch will do.

Provide clear, unambiguous text to explain what the Switch will do.
Avoid using a standalone Switch unless there is sufficient information about the result of switching it.

Text Alignment

Similar to RadioButtons and Checkboxes, if the text label corresponding to the Switch is too long, center-align the component to the first line of the text.

Center-align the Switch to the first line of longer text labels.
Avoid center-aligning the Switch to the height of the text label if it’s longer than a single line.