Decimal Input
A number field with locale-aware formatting. Type freely, see the formatted value on blur. Specialized variants ship for currency, percentage, and unit values.
Currency
CurrencyInput applies the right symbol, separator, and decimal places per ISO currency code. Eleven currencies are pre-configured: USD, EUR, GBP, JPY, CNY, KRW, INR, BRL, CAD, AUD, CHF.
$
€
¥
Percentage
%
Unit
kg
Installation
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Controlled numeric value. |
onValueChange | (value: number) => void | — | Emits a JS number, even though the field formats with separators. |
decimals | number | 2 | Number of decimal places kept and displayed on blur. |
min / max | number | — | Clamp range. Out-of-range values are clamped on blur. |
thousandsSeparator | string | "," | Inserted between every three integer digits on blur. |
decimalSeparator | string | "." | Used between integer and fractional parts. |
prefix | string | — | Static text rendered before the value (e.g. "$"). |
suffix | string | — | Static text rendered after the value (e.g. " kg"). |
allowNegative | boolean | true | Allow leading minus. |