Blazor Number Input

Blazor Bootstrap NumberInput component is built around HTML input of type="number" that prevents the user input based on the parameters set.

Basic usage#

By default, e + - are blocked. For all integral numeric types, dot . is blocked.

Generic type#

NumberInput is a generic component. Always specify the exact type. In the below example TValue is set to int, int?, float, float?, double, double?, decimal, and decimal?.

Enable min and max#

Set EnableMinMax="true" and set the Min and Max parameters to restrict the user input between the Min and Max range.
NOTE
If the user tries to enter a number in the NumberInput field which is out of range, then it will override with Min or Max value based on the context. If the user input is less than the Min value, then it will override with the Min value. If the user input exceeds the Max value, it will override with the Max value.

Step#

The Step sets the stepping interval when clicking the up and down spinner buttons. If not explicitly included, Step defaults to 1.

Text alignment#

You can change the text alignment according to your need. Use the TextAlignment parameter to set the alignment. In the below example, alignment is set to center and end.

Allow negative numbers#

By default, negative numbers are not allowed. Set the AllowNegativeNumbers parameter to true to allow the negative numbers.

Disable#

Use the Disabled parameter to disable the NumberInput.
razor
<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int?"
                 @bind-Value="@amount"
                 Disabled="@disabled"
                 Placeholder="Enter amount" />
</div>

<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>

@code {
    private int? amount;
    private bool disabled = true;

    private void Enable() => disabled = false;

    private void Disable() => disabled = true;

    private void Toggle() => disabled = !disabled;
}
Also, use Enable() and Disable() methods to enable and disable the NumberInput.
NOTE
Do not use both the Disabled parameter and Enable() & Disable() methods.
razor
<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput @ref="numberInput"
                 TValue="int?"
                 @bind-Value="@amount"
                 Placeholder="Enter amount" />
</div>

<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>

@code {
    private NumberInput<int?> numberInput = default!;
    private int? amount;

    private void Disable() => numberInput.Disable();

    private void Enable() => numberInput.Enable();
}

Validations#

Like any other blazor input component, NumberInput supports validations. Add the DataAnnotations on the NumberInput component to validate the user input before submitting the form. In the below example, we used Required and Range attributes.

Events: ValueChanged#

This event fires on every user keystroke that changes the NumberInput value.