Data Binding with @bind

Analogy categoryAnalogies

How @bind Works Under the Hood

@bind is syntactic sugar in Blazor Razor that generates both a value attribute and a change event handler from a single directive; writing <input @bind="UserName" /> expands at compile time into something equivalent to <input value="@UserName" @onchange="@(e => UserName = e.Value?.ToString())" />, giving developers the convenience of two-way binding while keeping the underlying one-way parameter flow model intact — the binding is a code-generation shortcut, not a special runtime mechanism.

🏏

Cricket analogy: The DRS (Decision Review System) automatically bundles multiple camera angles and ball-tracking data into one review request when a player calls for it, similar to how @bind bundles a value attribute and an onchange handler into a single directive.

Binding Different Elements and Custom Events

@bind works on more than text inputs: checkboxes bind to bool properties, select elements bind to enum or string values, and you can customize which DOM event triggers the update using @bind:event, for example @bind:event="oninput" makes the property update on every keystroke instead of waiting for onchange (which normally fires only when the field loses focus), giving finer control over responsiveness versus performance.

🏏

Cricket analogy: A stadium's ball-speed radar can be configured to log every delivery instantly or only summarize at the end of an over, similar to how @bind:event="oninput" updates on every keystroke versus the default onchange firing only after the field loses focus.

Format Strings and Culture-Aware Binding

For DateTime, numeric, and other formattable types, @bind supports a format string via @bind:format, such as @bind:format="yyyy-MM-dd" for date inputs, ensuring the displayed text matches what the bound type can parse back; without a matching format, binding can silently fail to round-trip values correctly, especially across different browser locale settings, so specifying an explicit format is considered a best practice for date and number fields.

🏏

Cricket analogy: A scorecard app must format the match date consistently as DD-MM-YYYY across all stadiums worldwide, or fans in different countries misread the fixture date, similar to how @bind:format ensures a DateTime displays and parses consistently regardless of browser locale.

razor

<input @bind="UserName" @bind:event="oninput" placeholder="Username" />
<p>Live preview: @UserName</p>

<input type="date" @bind="BirthDate" @bind:format="yyyy-MM-dd" />

<input type="checkbox" @bind="AcceptTerms" />

<select @bind="SelectedPlan">
    <option value="Free">Free</option>
    <option value="Pro">Pro</option>
    <option value="Enterprise">Enterprise</option>
</select>

@code {
    private string UserName { get; set; } = string.Empty;
    private DateTime BirthDate { get; set; } = DateTime.Today;
    private bool AcceptTerms { get; set; }
    private string SelectedPlan { get; set; } = "Free";
}

Since .NET 7, you can add @bind:after="MethodName" to run additional logic (including async work) immediately after a bound value is updated, without having to manually split the binding into separate value and event attributes.

Setting @bind:event="oninput" on a large form with many fields can trigger a re-render on every keystroke across all of them, which may cause noticeable input lag for complex UIs. Reserve oninput binding for fields where instant feedback (like a live character counter or search-as-you-type) genuinely matters.

@bind is compile-time sugar that expands into a value attribute plus a change event handler.
The default triggering event is onchange, which fires when the element loses focus.
@bind:event lets you switch the triggering event, e.g. to oninput for keystroke-level updates.
@bind:format applies a format string so DateTime and numeric values render and parse consistently.
Without an explicit format, date and number binding can behave inconsistently across browser locales.
@bind:after (added in .NET 7) runs a callback immediately after the bound value updates.
@bind works on inputs, checkboxes, and select elements, not just text boxes.