New to Telerik UI for Blazor? Download free 30-day trial

Display ON/OFF Labels of the Switch in Bootstrap and Material

Environment

Product Switch for Blazor

Description

Telerik Switch control doesn't seem to display the ON/OFF Labels when used with Bootstrap. How can I customize it to show the ON/OFF labels when I'm using Bootstrap or Material theme?

Solution

In Bootstrap and Material themes the Switch component does not render any labels by design. You can also test that in our live demo.

The labels have classes k-switch-label-on and k-switch-label-off which have display:none property.

In order to display the ON/OFF labels when using Bootstrap or Material themes, you can use custom CSS and override their current display property. See the example below for reference and test it with Bootstrap/Material theme.

@* Show the ON/OFF labels in Bootstrap and Material *@

<style>
    .k-switch-label-on, .k-switch-label-off {
        display: inline;
    }
</style>

<label>
    <TelerikSwitch @bind-Value="@isSelected" />
    <br />
    @( isSelected ? "Selected" : "Not selected" )
</label>

@code {
    private bool isSelected { get; set; }
}
In this article
Not finding the help you need? Improve this article