Blazor - Get Started with Number Input

Blazor - Get Started with Smart.NumberInput

Setup The Project

Follow the Getting Started guide to set up your Blazor Application with Smart UI.

Setup Basic Number Input

Smart.NumberInput is a custom number input element with additional built-in features such as a number formatting and styling.

  1. Add the NumberInput component to the Pages/Index.razor file
  2. Inside the component, set additional properties such as Min and Max values:
    <NumberInput Min="0" Max="10" Value="5"></NumberInput>
Basic number input

Number Formatting

Smart.NumberInput implements Intl.NumberFormat API for number formatting.
Some of the possible number formats are decimal, currency, percent and unit

<NumberInput Min="0" Max="10" Value="5" NumberFormat="currencyFormat"></NumberInput>
<NumberInput Min="0" Max="10" Value="5" NumberFormat="customFormat"></NumberInput>

    private object currencyFormat = new {
        style = "currency",
        currency = "USD"
    private object customFormat = new {
        style = "unit",
        unit = "liter",
        unitDisplay= "long"
Number formatting

NumberInput Customization

Smart.NumberInput can be styled in different ways by setting the Class property. The NumberInput can be default, outlined or underlined

<NumberInput Min="0" Max="10" Value="5" NumberFormat="currencyFormat" Class="underlined"></NumberInput>
Input styling

NumberInput Events

Smart.NumberInput provides an OnChange Event that can help you expand the component's functionality.
The event object has unique event.detail parameters.

  • OnChange - triggered when the selection is changed.
    Event Details: string label, dynamic oldLabel, dynamic oldValue, dynamic value

The demo below uses the OnChange Event to sum all previous values of the NumberInput:

<NumberInput NumberFormat="currencyFormat" Class="outlined" OnChange="OnChange"></NumberInput>
<h2>Some of all values: @sum</h2>

  int sum = 0;
  private void OnChange(Event ev)
          NumberInputChangeEventDetail detail = ev["Detail"];
          sum+= detail.Value;
NumberInput OnChange event