New to Kendo UI for AngularStart 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.

Change Theme
Theme
Loading ...

Specifying a Custom Size

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

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

Change Theme
Theme
Loading ...

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.