A money input where digits fill from the right like a register, each new digit rolling in, formatted live for the locale and currency. It shows a converted estimate, quick add chips and a balance limit that shakes when crossed.
Lena Moreau
lena@moreau.studio
npx shadcn@latest add https://hyperblur.dev/r/field-currency.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/field-currency.tsx.
import { FieldCurrency } from "@/components/hyperblur/field-currency"
<FieldCurrency defaultCurrency="EUR" max={2400} onChange={(amount, currency) => console.log(amount, currency)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Amount" | Label above the field. |
| value | number | Controlled amount in major units. Pair with onChange. | |
| defaultValue | number | 0 | Initial amount when uncontrolled. |
| onChange | (amount: number, currency: string) => void | Called with the amount and the currency code. | |
| currency | string | Controlled currency code. Pair with onCurrencyChange. | |
| defaultCurrency | string | "USD" | Initial currency when uncontrolled. |
| currencies | string[] | ["USD", "EUR", "GBP", "BRL", "JPY", "CAD"] | Codes offered in the currency menu. |
| onCurrencyChange | (currency: string) => void | Called when another currency is chosen. | |
| locale | string | "en-US" | Locale used for symbols, grouping and decimals. |
| max | number | Limit such as an account balance. Going over turns the field red. | |
| maxLabel | string | "Available" | Text before the limit at the top right. |
| rates | Record<string, number> | sample rates per USD | Units per US dollar, used for the converted estimate. |
| convertTo | string | "EUR" | Currency of the estimate. Falls back to USD when it equals the selected currency. |
| quickAmounts | number[] | [10, 50, 100] | Chips that add these amounts. |
| accent | string | "#2f7bff" | Focus ring and caret color. |
| disabled | boolean | false | Disables the field, the menu and the chips. |