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.
To get start quickly with Blazor NumericTextBox component, you can check on this video.
Importing Syncfusion Blazor component in the application
- Install
Syncfusion.Blazor.InputsNuGet package to the application by using theNuGet Package Manager.
Please ensure to check the
Include prereleaseoption 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.Themes/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.Themes/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.InputsAdd 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.4.35/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.
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.
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.
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
ValidateDecimalOnTypeis false, number of decimals will not be restricted. Else, number of decimals will be restricted while typing in the NumericTextBox.
<SfNumericTextBox TValue="double?" Value=10 ValidateDecimalOnType=true Decimals=3 Format="n3" Placeholder="ValidateDecimalOnType enabled" FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox>
<SfNumericTextBox TValue="double?" Value=10 Decimals=3 Format="n3" Placeholder="ValidateDecimalOnType disabled" FloatLabelType="@FloatLabelType.Auto"></SfNumericTextBox>The output will be as follows.
