Switch

Usage Guidelines

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

Meaning

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.

DoUse the Switch for a list of options that are non-conflicting.

Don'tAvoid 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.

DoProvide clear, unambiguous text to explain what the Switch will do.

Don'tAvoid 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.

DoCenter-align the Switch to the first line of longer text labels.

Don'tAvoid center-aligning the Switch to the height of the text label if it’s longer than a single line.