Events in Blazor Toggle Switch Button Component

1 Feb 20241 minute to read

ValueChange Event

The ValueChange event will trigger when switch state has been changed by user interaction. ValueChange event argument type is ChangeEventArgs. ChangeEventArgs contains Checked and Event properties.

@using Syncfusion.Blazor.Buttons

<SfSwitch @bind-Checked="isChecked" OffLabel="OFF" OnLabel="ON" ValueChange="Change" TChecked="bool?" ></SfSwitch>

@code{
    private bool? isChecked = null;
    private void Change(Syncfusion.Blazor.Buttons.ChangeEventArgs<bool?> args)
    {
        // Your code here.
    }
}

NOTE

Toggle Switch Button has support for nullable boolean

Native Events

The native event can be defined using event attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments.

The different event argument types for each event are,

• Focus Events - UIFocusEventArgs
• Mouse Events - UIMouseEventArgs
• Keyboard Events - UIKeyboardEventArgs
• Touch Events – UITouchEventArgs

List of Native events supported

The following native event support has been provided to the Toggle Switch Button component:

• onfocus
• onfocusout
• onfocusin
• onkeydown
• onkeyup
• Onkeypress

How to bind focus event to Toggle Switch Button

The onfocus attribute is used to bind the focus event for Toggle Switch Button. Here, we have explained about the sample code snippets of Toggle Switch Button.

@using Syncfusion.Blazor.Buttons

<label>onfocus</label>
<SfSwitch @onfocus="onFocus" @bind-Checked="isChecked"></SfSwitch>

@code {
    private bool isChecked = true;
}

@code {

    private void onFocus(Microsoft.AspNetCore.Components.Web.FocusEventArgs args)
    {
       //onfocus Event triggered
    }
}