Number Input
Formatted number input with controls and validation
Basic Usage
Current value: 42
Code
Without Controls
Value: undefined
Decimal Precision
Value: 5.50%
Formatted Display
Value: 1,234.56
Currency Input
Raw value: 99.99
Real-World Example
Product Order
Select quantity to calculate total
Unit Price:$29.99
Total:$29.99
Use Cases
💰Pricing Forms
🔢Quantity Calculators
⚙️Settings Controls
📊Financial Data Entry
API Reference
| Name | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled value |
defaultValue | number | — | Default uncontrolled value |
onChange | (value: number | undefined) => void | — | Callback when value changes |
onValueChange | (value: number | undefined) => void | — | Alternative callback for value changes |
min | number | — | Minimum allowed value |
max | number | — | Maximum allowed value |
step | number | 1 | Increment/decrement step size |
precision | number | 0 | Number of decimal places |
showControls | boolean | true | Show increment/decrement buttons |
formatDisplay | (value: number) => string | — | Custom display formatter |
parseValue | (value: string) => number | undefined | — | Custom value parser |
allowNegative | boolean | true | Allow negative values |
allowDecimal | boolean | true | Allow decimal values |
thousandsSeparator | string | boolean | false | Thousands separator character or enable default |
decimalSeparator | string | "." | Decimal separator character |
disabled | boolean | false | Disable the input |
Features
- Increment/decrement buttons
- Keyboard support (arrow up/down)
- Min/max validation
- Decimal precision
- Customizable thousands separators
- Custom format and parse functions
- Currency and percentage support
- Controls-free mode
- RTL/LTR support
- Full accessibility