Blazorise NumericInput component

A native numeric <input> component built around the <input type="number">.

Use <NumericInput> to have a field for any kind of numeric values. All basic types are supported, including nullable types (int, long, float, double, decimal, etc.).

Being built around native type="number" input element, the NumericInput component in Blazorise has certain inherent limitations due to its reliance on native browser functionalities for numeric inputs. One such limitation is the handling of decimal values; for instance, inputting "0.0" may result in the component rounding the value to "0". This occurs because the browser considers "0.0" as a complete value, which triggers an onchange event. Internally, the component, not knowing the exact number of decimals intended, rounds the value and subsequently triggers a ValueChanged event. This, in turn, prompts a refresh, causing Blazor to redraw the NumericInput component, which updates the value and the caret position.

Additionally, due to the component using the native type="number" partial values cannot be retrieved mid-entry. This means that constraints on the Value are only checked upon the blur event, allowing for the detection and handling of invalid values without interrupting the user's input process. To mitigate these issues, users could consider setting Immediate="false" to ensure the value is only submitted once focus is lost, or alternatively, use the NumericPicker component as a substitute.

Examples

Basic

<NumericInput @bind-Value="@value" />

@code {
    decimal? value = 123;
}

Generic type

Since NumericInput is a generic component you will have to specify the exact data type for the value. Most of the time it will be recognized automatically when you set the Value attribute, but if not you will just use the TValue attribute and define the type manually eg. 
<NumericInput TValue="decimal?" @bind-Value="@value" />

@code {
    decimal? value = 123;
}

Best Practices

Numeric Quantities

Numeric input is intended for values users may calculate with. Identifiers such as account numbers, postal codes, and phone numbers may contain digits, but they should be entered as text because numeric operations and formatting do not apply to them.

Numeric Precision

Choose the generic numeric type so its range and precision match the underlying data. Show units in the label or an addon and format values according to the user's culture. Minimum, maximum, precision, and business rules must still be enforced when the value is submitted.

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page