CurrencyInput Component
A locale-aware currency input component with support for multiple currencies and cultures.
Default (USD)
A simple currency input defaulting to US Dollars.
Current value: 99.99
Optimized for Performance & Best Typing Experience
By default, CurrencyInput uses UpdateOn="Change" for better performance and UX.
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 if you're targeting WebAssembly mode where interactivity will be fully handled in client-side.
Different Currencies
Examples with USD, EUR, GBP, and JPY currencies.
Current value: 150.00
Current value: 200.00
Current value: 75.50
Current value: 10000
Different Cultures
Same currency (EUR) with different culture formatting.
Current value: 1234.56
Current value: 987.65
Current value: 456.78
High Precision Values
Demonstrates native value precision during editing. Click to focus and see the exact stored value.
Current value: 100.2378
💡 When focused, shows full precision: 100.2378
When blurred, shows formatted: $100.24
Current value: 0.000123456
Current value: 1234.56789012
Without Currency Symbol
Display numeric value only, without the currency symbol.
Current value: 50.00
Double Type
Using double instead of decimal for the value type.
Current value: 299.99
Min/Max Constraints
Input with minimum and maximum value validation.
Value will be clamped between $10 and $1000. Current: 100
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
Integration with Blazor's EditForm and data annotations.
ARIA Attributes
Accessible inputs with proper ARIA labels and descriptions.
Enter the amount you'd like to donate. Minimum $5.
International Currencies
Examples showcasing the CurrencyCatalog with 40+ currencies, 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
CurrencyCatalog handles currencies with 0 decimals (JPY, KRW) and 3 decimals (KWD, BHD, OMR).
✓ No decimal places: ¥10000 not ¥10000.00
✓ No decimal places: ₩50000 not ₩50000.00
✓ Three decimal places: د.ك 123.456
✓ Three decimal places: ب.د 45.678
✓ No decimal places: Rp 100000
✓ Three decimal places: ر.ع 89.123
Symbol Positioning
Some currencies like Vietnamese Dong (VND) display the symbol after the amount.
✓ Symbol after amount: 250000₫ (0 decimals)
Symbol before amount: $250.00
Unicode Currency Symbols
CurrencyCatalog includes proper Unicode symbols for international currencies.