Currency Input
A numeric input field for currency values with automatic formatting.
Default (USD)
A currency input formatted as US Dollars.
Value: 99.99
Optimized for Performance & Best Typing Experience
By default, CurrencyInput uses UpdateOn="Change" for better performance and UX.
The displayed value is automatically formatted based on the Currency and Culture parameters.
Benefits:
- Better typing UX: No interruptions while typing — validation tooltips won't get in your way
- Better performance: Value updates and validation only run when you tab away (blur)
- Fewer re-renders: Your bound value updates once on blur, not on every keystroke
UpdateOn Modes:
UpdateOn="Change"
→ Updates on blur (default, recommended)UpdateOn="Input"
→ Updates on every keystroke
Tip: Use UpdateOn="Input" only when you need real-time updates (e.g., live total calculation, instant feedback), or when targeting WebAssembly where interactivity is fully client-side.
Different Currencies
Support for multiple international currencies.
Value: 200.00
Value: 75.50
Value: 10000
Different Cultures
Format values according to regional conventions.
High Precision Values
Handle large and precise currency values.
Value: 1000000.00
Without Currency Symbol
Hide the currency symbol for a cleaner look.
Value: 50.00
Double Type
Use double instead of decimal for floating-point storage.
Value: 299.99
Min/Max Constraints
Enforce minimum and maximum allowed values.
Value: 100
Value: 0
Disabled
Input with disabled state.
Readonly
Input in readonly mode - focusable but not editable.
Required
Input with HTML5 required validation.
Error State
Input with error visualization using aria-invalid.
Please enter a valid amount. Current: -10
Form Validation
Integrate with Blazor EditForm and DataAnnotations.
ARIA Attributes
Enhance accessibility with ARIA attributes.
Enter the total amount in USD.
Amount exceeds the maximum allowed.
International Currencies
Examples showcasing 40+ currencies with correct decimal places and Unicode symbols.
2 decimals
2 decimals
2 decimals
¥ symbol, 2 decimals
₹ symbol, 2 decimals
R$ symbol, 2 decimals
Special Decimal Places
Currencies with 0 decimals (JPY, KRW) and 3 decimals (KWD, BHD, OMR).
✓ ¥10000 not ¥10000.00
✓ ₩50000
✓ Three decimal places
✓ Three decimal places
Symbol Positioning
Some currencies like Vietnamese Dong (VND) display the symbol after the amount.
✓ Symbol after amount: 250000₫
Symbol before amount: $250.00
Unicode Currency Symbols
Proper Unicode symbols for international currencies.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| TValue | type param | — | Value type. Options: decimal, decimal?, double, double?. |
| Value | TValue | — | Current value. Use @bind-Value for two-way binding. |
| Currency | string | USD | ISO 4217 currency code (e.g., USD, EUR, GBP, JPY). |
| Culture | string? | null | Culture for number formatting (e.g., en-US, de-DE, fr-FR). |
| ShowCurrencySymbol | bool | true | Whether to show the currency symbol prefix. |
| Min | TValue? | null | Minimum allowed value. |
| Max | TValue? | null | Maximum allowed value. |
| Disabled | bool | false | Disables the input when true. |
| Readonly | bool | false | Makes the input read-only when true. |
| Required | bool | false | Marks the input as required for native form validation. |
| AriaInvalid | bool | false | Marks the input as invalid for screen readers. |
| ShowValidationError | bool | false | Shows browser native validation tooltip on invalid state. |
| Placeholder | string? | null | Placeholder text when the input is empty. |
| AriaLabel | string? | null | ARIA label for accessibility when no visible label exists. |
| AriaDescribedBy | string? | null | ID of the element that describes this input. |
| Class | string? | null | Additional CSS classes appended to the input element. |