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.
Syncfusion.Blazor.Inputs
NuGet package to the application by using the NuGet Package Manager
.Please ensure to check the
Include prerelease
option for our Beta release.
<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>
Open ~/_Imports.razor
file and import the Syncfusion.Blazor.Inputs
package.
@using Syncfusion.Blazor.Inputs
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.42/syncfusion-blazor.min.js"></script>
</head>
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>
After successful compilation of your application, press F5
to run the application.
The output will be as follows.
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.
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.
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.
ValidateDecimalOnType
is 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.