Blazor
Demos
Support
Forum
Download
Search results

Getting started with Blazor Numeric TextBox component

This section briefly explains how to include a NumericTextBox Component in your Blazor client-side application. You can refer to the Getting Started with Syncfusion Blazor for Client-side in Visual Studio 2019 page for introduction and configure the common specifications.

Importing Syncfusion Blazor component in the application

  • Install Syncfusion.Blazor NuGet package to the application by using the NuGet Package Manager.

Please ensure to check the Include prerelease option for our Beta release.

  • You can add the client-side resources through CDN or from NuGet package in the HEAD element of the ~/Pages/_Host.cshtml page.
   <head>
           <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
           @*<link href="https://cdn.syncfusion.com/blazor/{{version}}/styles/{{theme}}.css" rel="stylesheet" />*@
   </head>

For Internet Explorer 11 kindly refer the polyfills. Refer the documentation for more information.

   <head>
       <link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
       <script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
   </head>

Adding component package to the application

Open ~/_Imports.razor file and import the Syncfusion.Blazor.Inputs package.

@using Syncfusion.Blazor.Inputs

Add SyncfusionBlazor service in Startup.cs

Open the Startup.cs file and add services required by Syncfusion components using services.AddSyncfusionBlazor() method. Add this method in the ConfigureServices function as follows.

using Syncfusion.Blazor;

namespace BlazorApplication
{
    public class Startup
    {
        ....
        ....
        public void ConfigureServices(IServiceCollection services)
        {
            ....
            ....
            services.AddSyncfusionBlazor();
        }
    }
}

To enable custom client side resource loading from CRG or CDN. You need to disable resource loading by AddSyncfusionBlazor(true) and load the scripts in the HEAD element of the ~/Pages/_Host.cshtml page.

   <head>
           <script src="https://cdn.syncfusion.com/blazor/18.1.55/syncfusion-blazor.min.js"></script>
   </head>

Adding NumericTextBox component to the application

To initialize the NumericTextBox component add the below code to your Index.razor view page which is present under ~/Pages folder.

<SfNumericTextBox TValue="int?" Value=10></SfNumericTextBox>

Run the application

After successful compilation of your application, press F5 to run the application.

The output will be as follows.

NumericTextBox Sample

Range validation

You can set the minimum and maximum range of values in the NumericTextBox using the Min and Max properties, so the numeric value should be in the min and max range.

The following example demonstrates range validation.

<SfNumericTextBox TValue="int?" Value=5 Max=100 Min=1 Step=5></SfNumericTextBox>

The output will be as follows.

NumericTextBox Sample

Formatting the value

Users can set the format of the NumericTextBox component using the Format property. The value will be displayed in the specified format, when the component is in focused out state.

The following example demonstrates format the value by using currency format value c2.

<SfNumericTextBox TValue="int?" Value=10 Format="c2"></SfNumericTextBox>

The output will be as follows.

NumericTextBox Sample

Precision of numbers

You can restrict the number of decimals to be entered in the NumericTextBox by using the Decimals and ValidateDecimalOnType properties. So, you cannot enter the number whose precision is greater than the mentioned decimals.

  • If ValidateDecimalOnType is false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.
<SfNumericTextBox TValue="int?" Value=10 ValidateDecimalOnType=true Decimals=3 Format="n3" Placeholder="ValidateDecimalOnType enabled" FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox>

<SfNumericTextBox TValue="int?" Value=10 Decimals=3 Format="n3" Placeholder="ValidateDecimalOnType disabled" FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox>

The output will be as follows.

NumericTextBox Sample

See Also

Previous
Next