New to Kendo UI for Angular? Start a free 30-day trial

Labels

The Switch enables you to control the title of its labels.

Setting Up the Labels

To set the Kendo UI for Angular Switch labels, use the onLabel and offLabel properties, which accept string parameters.

By design, the Switch does not render any labels when the component is styled with the Kendo UI Bootstrap and Kendo UI Material themes.

The following example demonstrates the Switch labels using the Kendo UI Default theme.

Example
View Source
Edit In Stackblitz  
Change Theme:

Specifying a Custom Size

You can change the default width of the component by using custom CSS code.

<kendo-switch
    ...
    style="width: 150px;"
>
</kendo-switch>

This is especially useful when the localized messages exceed the default Switch dimensions, or when the labels are longer.

Example
View Source
Edit In Stackblitz  
Change Theme:

Styling the Labels

To change the default setup and achieve any of the additional predefined layouts, refer to the article on changing the Switch layout in the kendo-themes Wiki. For more information, refer to issue #567.