Currency Input
Formatted money input with live thousands separators, decimals on blur, a currency selector and min/max validation.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
CurrencyInputProps
Also accepts all props of Omit<React.ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "min" | "max" | "type" | "size">
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | null | — | Controlled numeric value (null = empty) |
| defaultValue | number | null | null | — |
| onValueChange | (value: number | null) => void | — | — |
| currency | CurrencyCode | — | Controlled currency |
| defaultCurrency | CurrencyCode | "USD" | — |
| onCurrencyChange | (currency: CurrencyCode) => void | — | — |
| lockCurrency | boolean | false | Hide the currency selector and lock the currency |
| min | number | — | — |
| max | number | — | — |
| label | string | — | — |
| hint | string | — | — |
| error | string | — | External error message (takes precedence over min/max validation) |
Install
$ npx shadcn@latest add https://chromotion.dev/r/currency-input.json