---
path: components/switch/usage
title: Usage
position: 2
seo_title: Guidelines for Using the Switch Component
seo_description: Get the knack of the Telerik and Kendo UI Switch and learn how
  to use and implement the component by following the instructions and
  recommendations in the user guidelines created by our designers.
---
## 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.

<DosDonts>
<Do description="Use the Switch for a list of options that are non-conflicting.">![Three Telerik and Kendo UI Switches representing three non-mutually exclusive options.](images/components-switch-usage-meaning-do.png "Render the Telerik and Kendo UI Switch when you want to represent options that are not mutually exclusive.")</Do>
<Dont description="Avoid using the Switch for a list of mutually exclusive options.">![Three Telerik and Kendo UI Switches representing mutually exclusive options.](images/components-switch-usage-meaning-dont.png "Do not render a Telerik and Kendo UI Switch for representing mutually exclusive options.")</Dont>
</DosDonts>


### 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.

<DosDonts>
<Do description="Provide clear, unambiguous text to explain what the Switch will do.">![A Telerik and Kendo UI Switch with a clear and straightforward label.](images/components-switch-usage-text-label-do.png "Use a simple and straightforward label for the Telerik and Kendo UI Switch to clearly indicate the action that will be triggered or stopped.")</Do>
<Dont description="Avoid using a standalone Switch unless there is sufficient information about the result of switching it.">![A Telerik and Kendo UI Switch showing an ambiguous label to an unclear result.](images/components-switch-usage-text-label-dont.png "Do not show ambiguous, misleading, or unclear labels of the Telerik and Kendo UI Switch.")</Dont>
</DosDonts>


### 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.

<DosDonts>
<Do description="Center-align the Switch to the first line of longer text labels.">![Telerik and Kendo UI Switch horizontally aligned to the first row of its longer label.](images/components-switch-usage-text-alignment-do.png "Align the Telerik and Kendo UI Switch horizontally centered to the first row of its label.")</Do>
<Dont description="Avoid center-aligning the Switch to the height of the text label if it’s longer than a single line.">![Telerik and Kendo UI Switch horizontally aligned to the height its longer label.](images/components-switch-usage-text-alignment-dont.png "Do not align the Telerik and Kendo UI Switch horizontally centered to the height of its label.")</Dont>
</DosDonts>