Class SfSwitch<TChecked>

Represents the Switch component which provides a graphical toggle that allows users to choose between checked (ON) and unchecked (OFF) states efficiently.

Inheritance
System.Object
SfBaseComponent
SfInputBase<TChecked>
SfSwitch<TChecked>
Inherited Members
Syncfusion.Blazor.Buttons.SfInputBase<TChecked>.CheckedChanged
Syncfusion.Blazor.Buttons.SfInputBase<TChecked>.CheckedExpression
Syncfusion.Blazor.Buttons.SfInputBase<TChecked>.ChildContent
Syncfusion.Blazor.Buttons.SfInputBase<TChecked>.HtmlAttributes
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfSwitch<TChecked> : SfInputBase<TChecked>
Type Parameters
Name
TChecked
Remarks

The SfSwitch<TChecked> lets you switch between two states: checked and unchecked. It can be customized with labels, themes, and state persistence, and supports user interaction via mouse, keyboard, or touch input.

Examples

In the following example, a basic switch is initialized using the Checked property:

<SfSwitch Checked="true">
</SfSwitch>

Constructors

SfSwitch()

Declaration
public SfSwitch()

Properties

jsRuntime

Declaration
protected IJSRuntime jsRuntime { get; set; }
Property Value
Type
Microsoft.JSInterop.IJSRuntime

OffLabel

Gets or sets the label text displayed when the Switch is in the OFF state.

Declaration
public string OffLabel { get; set; }
Property Value
Type Description
System.String

A string that defines the OFF label. The default value is String.Empty.
Remarks

This property allows you to show a custom text label when the SfSwitch<TChecked> is toggled OFF. If not specified, no label will be displayed on the OFF side.

OnLabel

Gets or sets the label text displayed when the Switch is in the ON state.

Declaration
public string OnLabel { get; set; }
Property Value
Type Description
System.String

A string that defines the ON label. The default value is String.Empty.
Remarks

This property allows you to display custom text label when the SfSwitch<TChecked> component is toggled ON. If not set, the ON side will not show any label.

ValueChange

Gets or sets an event callback that is triggered when the checked state of the SfSwitch<TChecked> component changes.

Declaration
public EventCallback<ChangeEventArgs<TChecked>> ValueChange { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<ChangeEventArgs<TChecked>>

An EventCallback that is raised whenever the Switch's checked state changes. The callback argument provides the new checked value and the associated mouse event.
Remarks

The ValueChange event is triggered only for changes through UI interaction, such as mouse click or touch. The callback receives a ChangeEventArgs<TChecked> indicating the new value.

Examples

The following example wires the ValueChange event to a handler method:

<SfSwitch ValueChange="@Changed">
</SfSwitch>
@code {
    private void Changed(ChangeEventArgs<TChecked> args)
    {
        // Handle the change
    }
}

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder

InitRender(Boolean)

Declaration
protected override void InitRender(bool isDynamic = false)
Parameters
Type Name Description
System.Boolean isDynamic
Overrides
Syncfusion.Blazor.Buttons.SfInputBase<TChecked>.InitRender(System.Boolean)

OnAfterRenderAsync(Boolean)

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
System.Boolean firstRender
Returns
Type
System.Threading.Tasks.Task
Overrides
Syncfusion.Blazor.Buttons.SfInputBase<TChecked>.OnAfterRenderAsync(System.Boolean)