New to Telerik UI for Blazor? Start a free 30-day trial
Switch Labels
Updated over 6 months ago
On or Off labels are rendered inside the Switch based on its value:
OnLabelwill be shown when the SwitchValueistrueOffLabelwill be shown when the SwitchValueisfalse
The component allows customization of the labels text through the dedicated parameters. Provide your desired strings for the Switch labels or use a blank space to remove visible labels.
Customize Labels Text
Provide the desired text for the On and Off labels through the corresponding parameters. If the text is longer, you can increase the component Width to ensure the label will be visible.
@* Use the OnLabel and OffLabel to customize the labels of the Switch. Use the Width parameter to manipulate the width of the component. *@
<p>
I agree to the terms and conditions
</p>
<TelerikSwitch @bind-Value="@hasAgreed"
OnLabel="@myOnLabel"
OffLabel="@myOffLabel"
Width="100px">
</TelerikSwitch>
@code {
public bool hasAgreed { get; set; }
public string myOnLabel { get; set; } = "Agree";
public string myOffLabel { get; set; } = "Disagree";
}Remove Labels
To remove the Switch labels, use a blank space for the OnLabel and OffLabel parameters.
@* Use a blank space to remove visible labels *@
<TelerikSwitch @bind-Value="@isSelected" OnLabel=" " OffLabel=" " />
@code {
private bool isSelected { get; set; }
}