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