Data Binding in Blazor Input Mask

14 Aug 20261 minute to read

Use the @bind-Value directive to enable two-way data binding with the MaskedTextBox. The Value parameter is of type string. When the user edits the input, the bound field is updated; when the bound field changes in code, the component reflects the new value.

For reference, see the SfMaskedTextBox, Value, and Mask API references, and the Blazor data binding documentation.

@using Syncfusion.Blazor.Inputs

<p>MaskedTextBox value is: @MaskValue</p>

<SfMaskedTextBox @bind-Value="@MaskValue"></SfMaskedTextBox>

@code {
    public string MaskValue { get; set; } = "12345";
}

Dynamic value binding

The value can also be updated programmatically at runtime. Updating the bound field triggers the component to display the new value, as shown in the following example. Click the Update Value button to change the bound value at runtime.

@using Syncfusion.Blazor.Inputs

<SfMaskedTextBox Mask="00000" @bind-Value="@MaskValue"></SfMaskedTextBox>

<button @onclick="@UpdateValue">Update Value</button>

@code {

    public string MaskValue { get; set; } = "12345";

    public void UpdateValue()
    {
        MaskValue = "67890";
    }
}