navius

Components / Currency Input

Currency Input

A caret-stable money field whose truth is a decimal?, formatted live through the culture's grouping, decimal separator and symbol.

Value: 1249.50

razor
<NaviusCurrencyInput @bind-Value="_amount" Currency="USD" Min="0" Max="1000000"
                    class="h-10 w-48 rounded-md border px-3 text-right tabular-nums" />

@code { private decimal? _amount = 1249.50m; }

Features

  • A specialization of the Masked Input caret bridge: the value is never a string. C# parses the digits and reformats via NumberFormatInfo on every keystroke.
  • Culture drives symbol, grouping and decimals; Currency (ISO 4217) overrides the symbol; ShowSymbol toggles it in the value.
  • Min / Max clamp on blur and the fraction pads to MinFractionDigits; AllowNegative gates the sign.
  • Controlled via @bind-Value, uncontrolled via DefaultValue; inputmode="decimal" by default.

Installation

Install the brain, or copy just this primitive in with the CLI.

Terminal bash
navius add currency-input

Anatomy

A single input.

razor
@using Navius.Primitives.Components.CurrencyInput

<NaviusCurrencyInput @bind-Value="_amount" Currency="EUR" />

API Reference

NaviusCurrencyInput

The currency field. Renders an input with inputmode=decimal. Value is two-way bindable.

Prop Type Default
Value decimal? -
ValueChanged EventCallback<decimal?> -
DefaultValue decimal? -
Culture CultureInfo? current
Currency string? -
MinFractionDigits int? culture
MaxFractionDigits int? culture
AllowNegative bool false
Min decimal? -
Max decimal? -
ShowSymbol bool true
Disabled bool false
Invalid bool false
…attributes IDictionary<string, object>? -

Data attributes

Data attribute Values
[data-navius-currency-input] Present on the input
[data-empty] Present when the value is null
[data-negative] Present when the value is negative
[data-invalid] Present when Invalid is set

Accessibility

A plain <input> with inputmode="decimal". Pair it with a Label. Invalid reflects as data-invalid; data-negative lets the skin color a negative amount.