Blazor Switch Overview

The Blazor Switch component allows the user to toggle between checked and unchecked states.

Telerik UI for Blazor Ninja image

The Switch component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Switch

  1. Use the <TelerikSwitch> tag
  2. Provide a Value (one-way binding) or @bind-Value (two-way binding)

Basic setup of the Telerik Switch using two-way data binding

@* Basic setup of the Telerik Switch Component *@

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

@code {
    private bool isSelected { get; set; }
}

The result from the code snippet above

Telerik Switch Component

Labels

The Switch has dedicated On and Off labels serving as text representation of the component value. Read more about the Switch labels....

Events

The Blazor Switch generates events that you can handle and further customize its behavior. Read more about the Switch events....

Validation

You can ensure that the component value is acceptable by using the built-in validation. Read more about input validation....

Switch Parameters

The following table lists the Switch parameters. Also check the Switch API Reference for a full list of all properties, methods and events.

Attribute Type and Default Value Description
Enabled bool Whether the component is enabled.
Id string Renders as the id attribute on the wrapping <span> element of the component.
TabIndex int The tabindex attribute rendered on the Switch.
Value bool or bool? The value of the Switch. Supports two-way binding.
OnLabel string The label of the component when the Value is true.
OffLabel string The label of the component when the Value is false.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Switch:

Attribute Type and Default Value Description
Class string The CSS class that will be rendered on the main wrapping element of the Switch. Use it to customize the Switch background color and other styles
Width string The width of the component. You can set the Width parameter to any of the supported units.

You can find more options for customizing the Switch styling in the Appearance article.

Switch Reference and Methods

The Switch is a generic component and its type comes from the model field it is bound to - it is either bool or bool? (a null value is treated as false). Add a reference to the component instance to use the Switch methods.

Method Description
FocusAsync programmatically focuses the Switch.
@* Use the Switch reference to programmatically focus the component *@

<TelerikButton OnClick="@FocusSwitch">Focus Switch</TelerikButton>

<TelerikSwitch @bind-Value="@toggleSwitch" @ref="@SwitchRef" />

@code {
    bool toggleSwitch { get; set; } // the type of this field determines the type of the reference
    TelerikSwitch<bool> SwitchRef { get; set; }

    void FocusSwitch()
    {
        SwitchRef.FocusAsync();
    }
}

Next Steps

See Also

In this article