Numeric Input
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 when targeting WebAssembly where interactivity is fully 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.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| TValue | numeric type | - | The numeric type: int, decimal, double, float, long, etc. |
| Value | TValue | 0 | The current numeric value. |
| Min | TValue? | — | Minimum allowed value. |
| Max | TValue? | — | Maximum allowed value. |
| Step | TValue? | — | The increment/decrement step value. |
| Placeholder | string? | — | Placeholder text shown when the input is empty. |
| Disabled | bool | false | When true, the input is non-interactive. |
| Readonly | bool | false | When true, the input is focusable but not editable. |
| Required | bool | false | When true, marks the field as required. |
| AriaInvalid | bool | false | When true, applies aria-invalid for error state styling. |
| UpdateOn | UpdateOnMode | Change | When to update bound value. Change = on blur, Input = on every keystroke. |
| Class | string? | — | Additional CSS classes appended to the root element. |