Blazor Currency Input

Use the Blazor Bootstrap CurrencyInput component to show the numbers in the user's locale format, including the currency symbol.

Basic usage#

By default, e + - are blocked. For all integral numeric types, dot . is blocked.
TIP
The default locale is en-US.

Show currency symbols for the different locales#

Hide currency symbol#

Set HideCurrencySymbol parameter value to true to hide the currency symbol.

Using fraction digits and integer digits#

In the below example, formatting adds zeros to display minimum integers and fractions.
DANGER
MinimumFractionDigits and MaximumFractionDigits parameters are applicable for floating-point numeric types only.

Wrap the number with parentheses instead of appending a minus sign#

In many locales, accounting format means to wrap the number with parentheses instead of appending a minus sign. You can enable this formatting by setting the CurrencySign option to Accounting. The default value is Standard.

Generic type#

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

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 CurrencyInput.
razor 
<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput 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 CurrencyInput.
NOTE
Do not use both the Disabled parameter and Enable() & Disable() methods.
razor 
<div class="mb-3">
    <label class="form-label">Amount</label>
    <CurrencyInput @ref="currencyInput"
                   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 CurrencyInput<int?> currencyInput = default!;
    private int? amount;

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

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

Validations#

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

Decimal values#

Events: ValueChanged#

This event fires on every user keystroke that changes the CurrencyInput value.
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community