.NET › Blazor (Server & WebAssembly)
How does two-way data binding work with @bind in Blazor, and how can you customize the triggering event?
AdvancedAnswer
@bind creates a two-way binding between a component field/property and an HTML element's value, automatically wiring up both the value attribute and an appropriate change event (oninput or onchange depending on element type) to keep them in sync. You can customize the triggering event with @bind:event (e.g., 'oninput' for immediate updates as the user types) and apply formatting/parsing with @bind:format for types like DateTime.
<input @bind="searchTerm" @bind:event="oninput" />
<p>Searching for: @searchTerm</p>
@code {
private string searchTerm = "";
}
<!-- Default @bind uses onchange (fires on blur); oninput fires on every keystroke -->Real-world example A live search-as-you-type feature explicitly sets @bind:event="oninput" instead of relying on the default onchange behavior, ensuring search results update on every keystroke rather than only after the input loses focus.