NumericInput Component
A type-safe numeric input component with support for various numeric types.
Integer Input
A simple integer input with placeholder.
Current value: 10
Optimized for Performance & Best Typing Experience
By default, NumericInput 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 calculation, instant range validation), or if you're targeting WebAssembly mode where interactivity will be fully handled in client-side.
Decimal Input
Decimal input for precise values like currency.
Current value: $29.99
Double Input
Double precision floating point input.
Current value: 75.5%
Float Input
Single precision floating point input.
Current value: 4.5
Min/Max Constraints
Input with minimum and maximum value validation.
Current value: 25
Disabled
Input with disabled state.
Required
Input with HTML5 required validation.
With Label
Inputs with labels and helper text.
Current value: $100.00
Error State
Input with error visualization using aria-invalid.
Please enter a valid number. Current: -1
Readonly
Input in readonly mode - focusable but not editable.