Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Currency Input
A locale-aware currency input with automatic formatting, currency symbols, thousand separators, and support for 40+ world currencies including USD, EUR, GBP, and JPY.
Default
A basic
CurrencyInput bound to a USD currency value using @bind-Value. The component automatically displays the currency symbol as a prefix and formats the value with the appropriate decimal places for the selected currency.
Loading example…
Different Currencies
Use the
CurrencyCode parameter with an ISO 4217 code to render currency inputs for various currencies. Each currency automatically uses its correct symbol, decimal places, and locale-specific formatting. For example, JPY uses zero decimal places while USD uses two.
Loading example…
With Constraints
Set
Min, Max, and AllowNegative to constrain the input to a specific value range. Values outside the range are automatically clamped on blur. This is useful for payment forms or budget inputs where negative or excessively large amounts are not meaningful.
Loading example…
Without Symbol
Set
ShowSymbol to false to hide the currency symbol prefix or suffix while retaining locale-aware number formatting and thousand separators. This is useful when the currency is indicated elsewhere in the UI, such as in a label or column header.
Loading example…
Without Thousand Separator
Set
UseThousandSeparator to false to display the value without comma or period grouping. The value is still formatted with the correct number of decimal places for the currency. This can be useful in compact layouts or when the separator might cause confusion.
Loading example…
Disabled
Set
Disabled to true to prevent user interaction. The input displays reduced opacity and a not-allowed cursor. The currency symbol area also reflects the disabled state. Keyboard shortcuts are ignored.
Loading example…
Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes for project-specific input styles. You can change the border color, focus ring, or text styling to match your design system without creating a new component.
Loading example…
Payment Form
A real-world payment form composition using
CurrencyInput alongside Input and NativeSelect components inside a Card. This demonstrates how currency inputs integrate into complete checkout or payment form layouts.
Loading example…
Public Methods
Use a component reference (@ref) to call this method programmatically.
| Method | Returns | Description |
|---|---|---|
| FocusAsync() | ValueTask | Moves keyboard focus to the underlying input element. Call via @ref — no JS interop needed. |
The component also exposes a public Element property of type ElementReference that points at the underlying input element, for advanced JS interop scenarios.