How to automatically add thousand separators while typing in SfNumericTextBox (e.g. 1,000.00 format)?

[Ahmet AKARSU]

Hi,
In my Blazor Server project, I’m using the SfNumericTextBox component from Syncfusion.Blazor.Inputs for entering currency amounts.

Here’s my current setup:

<SfNumericTextBox TValue="decimal"
                  @bind-Value="@_fatcar.TUTAR"
                  Min="0.01m"
                  Format="n2"
                  Locale="tr-TR"
                  CssClass="e-outline"
                  HtmlAttributes="@(new Dictionary<string, object> {
                      {"id", "islemTutar"},
                      {"name", "islemTutar"}
                  })">
</SfNumericTextBox>

This works fine — when the user leaves the input field, the value is displayed correctly as 1.000,00 (Turkish locale).
However, I’d like the thousand separators to appear instantly while typing — not just on blur.

For example:

• When the user types 1000, the input should automatically show 1.000

• When typing 12345,67, it should become 12.345,67 dynamically.

Even with Locale="tr-TR" and Format="n2", the grouping only happens after focus loss.
I checked the Syncfusion documentation but couldn’t find a built-in property for live formatting while typing.

Is there any Syncfusion-supported way to achieve this?
Or should I handle it manually via OnInput or JavaScript interop?

Thanks!

[Mallesh Ravi Chandran]

We have reviewed your reported query regarding the Numeric TextBox component and its format update behavior. For clarification, the component handles validation, error styling, and format updates only during the blur action when the input loses focus. This is the default behavior designed to maintain consistent and standard input formatting.

 

UG link: https://blazor.syncfusion.com/documentation/numeric-textbox/formats

 

Alternatively, if your requirement involves live formatting with thousand separators while typing, this can be achieved using JavaScript interop. We’ve provided a sample code snippet and attached a working example to demonstrate how this can be implemented.

 

[~/Home.razor]:

<SfNumericTextBox ID="currencyInput" TValue="decimal" @bind-Value="@Value" Min="0.01m" Format="n2" CssClass="e-outline"></SfNumericTextBox>

 

@code{

    private decimal Value = 1000;

    protected override async Task OnAfterRenderAsync(bool firstRender)

    {

        if (firstRender)

        {

            await JS.InvokeVoidAsync("enableLiveCurrencyFormatting", "currencyInput");

        }

    }

}

 

[~/App.razor]:

<script>

     window.enableLiveCurrencyFormatting = function (inputId) {

         const input = document.getElementById(inputId);

         if (!input) return;

 

         input.addEventListener('input', function (e) {

             let value = input.value.replace(/,/g, '');

             if (!isNaN(value) && value !== '') {

                 let parts = value.split('.');

                 parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');

                 input.value = parts.join('.');

             }

         });

     };

 </script>

 

 Output screenshot:

 

Please let us know if you need any further assistance or clarification.

Attachment: Numericformat_415b333d.zip