Exact-Decimal Currency Amount
A controlled currency amount field that preserves exact decimal strings from editing through display.
Invoice · INV-2048
Editorial production
€. Use , for decimals; grouping separators are not accepted while editing.
Second consumer
Equipment deposit
A refundable camera-kit deposit billed in yen, where fractional units are not accepted.
￥. Use . for decimals; grouping separators are not accepted while editing.
Input Currency Amount formats invoice lines and deposits without converting money through binary floating point.
The caller supplies the ISO currency code and permitted fractional scale. Locale affects display and decimal entry, while conversion rates, arithmetic and storage remain in the consuming application.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/input-currency-amountUsage
"use client";
import { useState } from "react";
import { InputCurrencyAmount } from "@/components/input-currency-amount";
export function InvoiceTotal() {
const [total, setTotal] = useState("12840.5");
return <InputCurrencyAmount value={total} onValueChange={setTotal} currency="EUR" fractionDigits={2} locale="de-DE" label="Invoice total" />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | required | Canonical signed decimal amount with no grouping or currency symbol. |
| onValueChange | (value: string) => void | required | Receives valid canonical values only; no floating-point conversion is used. |
| currency | string | required | ISO 4217 currency code for display; this does not convert amounts. |
| fractionDigits | number | required | Allowed fractional scale, an integer from zero through six. |
| locale | string | en-GB | Intl locale for separators and currency placement; also determines decimal entry. |
| label | string | Amount | Visible accessible input label. |
| disabled | boolean | false | Disables editing. |
| className | string | undefined | Additional classes merged on the root. |
Customisation
The field uses semantic tokens and can be themed in a consumer container. The caller owns currency policy, permitted scale, storage, arithmetic and conversion.
.invoice-total { max-inline-size: 28rem; }Frequently asked questions
- Does it round values to the allowed scale?
- No. Excess fractional digits are rejected and never rounded into another amount.
- Does it convert between currencies?
- No. The ISO code controls display only; no exchange rate or conversion is involved.