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
object
ComponentBase
OwningComponentBase
SfOwningComponentBase
SfBaseComponent
SfInputBase<TChecked>
SfSwitch<TChecked>
Implements
Inherited Members
Namespace: Syncfusion.Blazor.Buttons
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfSwitch<TChecked> : SfInputBase<TChecked>, IComponent, IHandleEvent, IHandleAfterRender, IDisposable
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

OffLabel

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

Declaration
[Parameter]
public string OffLabel { get; set; }
Property Value
Type Description
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
[Parameter]
public string OnLabel { get; set; }
Property Value
Type Description
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
[Parameter]
public EventCallback<ChangeEventArgs<TChecked>> ValueChange { get; set; }
Property Value
Type Description
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
    }
}

jsRuntime

Declaration
[Inject]
protected IJSRuntime jsRuntime { get; set; }
Property Value
Type
IJSRuntime

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type Name Description
RenderTreeBuilder __builder
Overrides

InitRender(bool)

Declaration
protected override void InitRender(bool isDynamic = false)
Parameters
Type Name Description
bool isDynamic
Overrides

OnAfterRenderAsync(bool)

Method invoked after each time the component has been rendered.

Declaration
protected override Task OnAfterRenderAsync(bool firstRender)
Parameters
Type Name Description
bool firstRender

Set to true for the first time component rendering; otherwise gets false.
Returns
Type Description
Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

Implements