Globalization in Blazor Numeric TextBox Component

7 Jul 20221 minute to read

Blazor NumericTextBox component can be localized. Refer to Blazor Localization topic to localize Syncfusion Blazor components.

Customize the localized text

  • You can change the localized text of particular component by editing the wwwroot/blazor-locale/src/.json file.

  • In the following code, modified the localized text of increment title and decrement title in de culture. File - wwwroot/blazor-locale/src/de.json.

      {
      "de": {
          "numerictextbox": {
          "incrementTitle": "Wert erhöhen",
          "decrementTitle": "Dekrementwert"
          }
      }
      }
    

    Customizing Localized Text in Blazor NumericTextBox

Right to Left

RTL provides an option to switch the text direction and layout of the NumericTextBox component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Urdu, etc.). To enable RTL NumericTextBox, set the EnableRtl to true.

The following code example initializes the NumericTextBox component in Chinese culture.

@using Syncfusion.Blazor.Inputs
@inject HttpClient Http

<SfNumericTextBox TValue="int?" Value=10 Locale="zh" EnableRtl="true"></SfNumericTextBox>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }
    protected override async Task OnInitializedAsync()
    {
        this.JsRuntime.Sf().LoadLocaleData(await Http.GetJsonAsync<object>("blazor-locale/src/zh.json")).SetCulture("zh");
    }
}

Right to Left in Blazor NumericTextBox