Native Events in Blazor CheckBox Component

22 Oct 20241 minute to read

You can define the native event using on 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 Checkbox component:

List of Native events
onchange	oninput	onblur	onfocusout	onfocusin
onfocus	onclick	onkeydown	onkeyup	onkeypress

How to bind onchange event to Checkbox

The onchange attribute is used to bind the onchange event for Checkbox. Here, we have explained about the sample code snippets of Checkbox.

@using Syncfusion.Blazor.Buttons

<SfCheckBox @bind-Checked="isChecked" Label="Change" @onchange="onChange"></SfCheckBox>

@code {
    private bool isChecked = true;
    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
       //onChange Event triggered
    }
}

How to bind ValueChange event to Checkbox

To bind the change event in the checkbox ValueChange event is used and the event is triggered when the value in the checkbox changes.

@using Syncfusion.Blazor.Buttons

<SfCheckBox @bind-Checked="isChecked" Label="Change" ValueChange="ValueChange" TChecked="bool"></SfCheckBox>

@code {
    private bool isChecked = true;
    private void ValueChange(ChangeEventArgs<bool> args)
    {
        //ValueChange Event triggered
        var state = args.Checked;
    }
}