Blazor NumberInput

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.

Amount

Entered Amount: 0

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int" @bind-Value="@amount" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount</div>

@code {
    private int amount;
}

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?.

Enter int number

Entered Number: 0

Enter int? number

Entered Number:

Enter float number

Entered Number: 0

Enter float? number

Entered Number:

Enter double number

Entered Number: 0

Enter double? number

Entered Number:

Enter decimal number

Entered Number: 0

Enter decimal? number

Entered Number:

<div class="mb-3">
    <label class="form-label">Enter int number</label>
    <NumberInput TValue="int" @bind-Value="@amount" />
    <div class="mt-1">Entered Number: @amount</div>
</div>

<div class="mb-3">
    <label class="form-label">Enter int? number</label>
    <NumberInput TValue="int?" @bind-Value="@amount2" />
    <div class="mt-1">Entered Number: @amount2</div>
</div>

<div class="mb-3">
    <label class="form-label">Enter float number</label>
    <NumberInput TValue="float" @bind-Value="@amount3" />
    <div class="mt-1">Entered Number: @amount3</div>
</div>

<div class="mb-3">
    <label class="form-label">Enter float? number</label>
    <NumberInput TValue="float?" @bind-Value="@amount4" />
    <div class="mt-1">Entered Number: @amount4</div>
</div>

<div class="mb-3">
    <label class="form-label">Enter double number</label>
    <NumberInput TValue="double" @bind-Value="@amount5" />
    <div class="mt-1">Entered Number: @amount5</div>
</div>

<div class="mb-3">
    <label class="form-label">Enter double? number</label>
    <NumberInput TValue="double?" @bind-Value="@amount6" />
    <div class="mt-1">Entered Number: @amount6</div>
</div>

<div class="mb-3">
    <label class="form-label">Enter decimal number</label>
    <NumberInput TValue="decimal" @bind-Value="@amount7" />
    <div class="mt-1">Entered Number: @amount7</div>
</div>

<div class="mb-3">
    <label class="form-label">Enter decimal? number</label>
    <NumberInput TValue="decimal?" @bind-Value="@amount8" />
    <div class="mt-1">Entered Number: @amount8</div>
</div>

@code {
    private int amount;
    private int? amount2;
    private float amount3;
    private float? amount4;
    private double amount5;
    private double? amount6;
    private decimal amount7;
    private decimal? amount8;
}

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.

Amount Tip: The amount must be between 10 and 500.

Entered Amount:

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="decimal?" @bind-Value="@amount" EnableMinMax="true" Min="10" Max="500" Placeholder="Enter amount" />
    <span class="form-text">Tip: The amount must be between 10 and 500.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>

@code {
    private decimal? amount;
}

Step #

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

Amount Info: Here Step parameter is set to 10.

Entered Amount:

Amount Info: Here Step parameter is set to 2.5.

Entered Amount:

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int?" @bind-Value="@amount" Step="10" Placeholder="Enter amount" />
    <span class="form-text">Info: Here <code>Step</code> parameter is set to <b>10</b>.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="decimal?" @bind-Value="@amount2" Step="2.5" Placeholder="Enter amount" />
    <span class="form-text">Info: Here <code>Step</code> parameter is set to <b>2.5</b>.</span>
</div>
<div class="mb-3">Entered Amount: @amount2</div>

@code {
    private int? amount;
    private decimal? amount2;
}

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.

Amount

Entered Amount: 0

Amount

Entered Amount: 2.34

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int" @bind-Value="@amount" TextAlignment="Alignment.Center" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount</div>

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="decimal" @bind-Value="@amount2" TextAlignment="Alignment.End" Placeholder="Enter amount" />
</div>
<div class="mb-3">Entered Amount: @amount2</div>

@code {
    private int amount;
    private decimal amount2 = 2.34M;
}

Allow negative numbers #

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

Amount Tip: Negative numbers are also allowed.

Entered Amount: 0

<div class="mb-3">
    <label class="form-label">Amount</label>
    <NumberInput TValue="int" @bind-Value="@amount" AllowNegativeNumbers="true" Placeholder="Enter amount" />
    <span class="form-text">Tip: Negative numbers are also allowed.</span>
</div>
<div class="mb-3">Entered Amount: @amount</div>

@code {
    private int amount;
}

Disable #

Use the Disabled parameter to disable the NumberInput.

Amount

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.

Amount

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.

@using System.ComponentModel.DataAnnotations

<style>
    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #26b050;
    }

    .invalid {
        outline: 1px solid red;
    }

    .validation-message {
        color: red;
    }
</style>

<EditForm EditContext="@editContext" OnValidSubmit="HandleOnValidSubmit">
    <DataAnnotationsValidator />

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Item Price: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <NumberInput TValue="decimal?" Value="invoice.Price" ValueExpression="() => invoice.Price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
            <ValidationMessage For="@(() => invoice.Price)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Item Discount:</label>
        <div class="col-md-10">
            <NumberInput TValue="decimal?" Value="invoice.Discount" ValueExpression="() => invoice.Discount" ValueChanged="(value) => DiscountChanged(value)" Placeholder="Enter discount" />
            <ValidationMessage For="@(() => invoice.Discount)" />
        </div>
    </div>

    <div class="form-group row mb-3">
        <label class="col-md-2 col-form-label">Total Amount: <span class="text-danger">*</span></label>
        <div class="col-md-10">
            <NumberInput TValue="decimal?" @bind-Value="invoice.Total" Disabled="true" Placeholder="Enter total" />
            <ValidationMessage For="@(() => invoice.Total)" />
        </div>
    </div>

    <div class="row">
        <div class="col-md-12 text-right">
            <Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Class="float-end" @onclick="ResetForm">Reset</Button>
            <Button Type="ButtonType.Submit" Color="ButtonColor.Success" Class="float-end me-2">Submit</Button>
        </div>
    </div>
</EditForm>

@code {
    private Invoice invoice = new();
    private EditContext? editContext;

    protected override void OnInitialized()
    {
        editContext = new EditContext(invoice);
        base.OnInitialized();
    }

    protected override void OnParametersSet()
    {
        CalculateToatl();
        base.OnParametersSet();
    }

    private void PriceChanged(decimal? value)
    {
        invoice.Price = value;
        CalculateToatl();
    }

    private void DiscountChanged(decimal? value)
    {
        invoice.Discount = value;
        CalculateToatl();
    }

    private void CalculateToatl()
    {
        var price = invoice.Price.HasValue ? invoice.Price.Value : 0;
        var discount = invoice.Discount.HasValue ? invoice.Discount.Value : 0;
        invoice.Total = price - discount;
    }

    public void HandleOnValidSubmit()
    {
        Console.WriteLine($"Price: {invoice.Price}");
        Console.WriteLine($"Discount: {invoice.Discount}");
        Console.WriteLine($"Total: {invoice.Total}");
    }

    private void ResetForm()
    {
        invoice = new();
        editContext = new EditContext(invoice);
    }

    public class Invoice
    {
        [Required(ErrorMessage = "Price required.")]
        [Range(60, 500, ErrorMessage = "Price should be between 60 and 500.")]
        public decimal? Price { get; set; } = 232M;

        [Range(0, 50, ErrorMessage = "Discount should be between 0 and 50.")]
        public decimal? Discount { get; set; }

        [Required(ErrorMessage = "Amount required.")]
        [Range(10, 500, ErrorMessage = "Total should be between 60 and 500.")]
        public decimal? Total { get; set; }
    }
}

Events: ValueChanged #

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

Item Price: *

<div class="row mb-3">
    <label class="col-md-2 col-form-label">Item Price: <span class="text-danger">*</span></label>
    <div class="col-md-10">
        <NumberInput TValue="decimal?" Value="price" ValueExpression="() => price" ValueChanged="(value) => PriceChanged(value)" Placeholder="Enter price" />
    </div>
</div>
<div>
    @displayPrice
</div>
@code {
    private decimal? price = 10M;
    private string? displayPrice;

    private void PriceChanged(decimal? value)
    {
        price = value; // this is mandatory
        displayPrice = $"Price: {value}, changed at {DateTime.Now.ToLocalTime()}.";
    }
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor NumberInput

Basic usage #

Generic type #

Enable min and max #

Step #

Text alignment #

Allow negative numbers #

Disable #

Validations #

Events: ValueChanged #

Links

Guides

Community