CurrencyInput

Code

import { CurrencyInput } from "@fadymondy/nasaq/web";import { useState } from "react";export function Fee() {  const [minor, setMinor] = useState<number | null>(1999);  return <CurrencyInput aria-label="Fee" currency="USD" value={minor} onValueChange={setMinor} />;}

Forms · beta

Live examples and controls: CurrencyInput in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/currency-input.json

A field for an amount of money. The value you read and write is an integer in minor units (cents, halalas, fils): 1999 is 19.99 USD, 12500 is 12.500 KWD, 1200 is 1,200 JPY. Nothing is a float, so nothing drifts. The currency decides how many decimals the field accepts, and digits typed or pasted in any set (1250.5, ١٢٥٠٫٥) give the same amount.

While the field has focus it shows the plain number you are editing. On blur it groups and pads it: 1,250.50.

When to useCopy Anchor Link

• Prices, budgets, fees, invoice lines and any input the backend stores as minor units.
• Forms used in Arabic and English, where people paste amounts from spreadsheets and chats.
• An amount with a choosable currency (currencies).

When not to useCopy Anchor Link

• A plain quantity or percentage: use an Input with inputMode="numeric".
• Showing a price: use Price or Num with style: "currency" (numeric).
• Converting between currencies at an exchange rate: this only keeps the same amount of money when the decimals differ.

ImportCopy Anchor Link

import { CurrencyInput, parseMoney, formatMinor } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { CurrencyInput } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Fee() {
  const [minor, setMinor] = useState<number | null>(1999);
  return <CurrencyInput aria-label="Fee" currency="USD" value={minor} onValueChange={setMinor} />;
}

AnatomyCopy Anchor Link

CurrencyInput                data-slot="currency-input" data-currency="USD"
└─ InputGroup                data-invalid when out of range
   ├─ symbol addon           data-slot="currency-symbol"  (start or end, where the locale puts it)
   ├─ input                  dir="ltr", inputMode="decimal" (numeric for 0 decimals)
   ├─ currency Select        only with `currencies`
   └─ hidden input           only with `name`: the minor-unit integer

APICopy Anchor Link

CurrencyInputCopy Anchor Link

Helpers (also exported from the package)Copy Anchor Link

ExamplesCopy Anchor Link

Arabic, Arabic digits and Saudi riyalsCopy Anchor Link

import { CurrencyInput, NasaqProvider } from "@fadymondy/nasaq/web";

export const Riyals = () => (
  <NasaqProvider locale="ar" target="scope">
    <CurrencyInput aria-label="السعر" currency="SAR" numberingSystem="arab" defaultValue={125050} />
  </NasaqProvider>
);

The field shows ١٬٢٥٠٫٥٠ and the riyal symbol after the figure, as Arabic writes it.

Choosable currencyCopy Anchor Link

import { CurrencyInput } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Budget() {
  const [currency, setCurrency] = useState("USD");
  const [minor, setMinor] = useState<number | null>(1250);
  return (
    <CurrencyInput
      aria-label="Budget"
      currency={currency}
      currencies={["USD", "SAR", "KWD", "JPY"]}
      value={minor}
      onValueChange={setMinor}
      onCurrencyChange={(next, converted) => {
        setCurrency(next);
        setMinor(converted);
      }}
    />
  );
}

In a Field with a rangeCopy Anchor Link

import { CurrencyInput, Field, FieldDescription, FieldLabel } from "@fadymondy/nasaq/web";

export const Deposit = () => (
  <Field>
    <FieldLabel>Deposit</FieldLabel>
    <CurrencyInput currency="SAR" min={5000} max={5000000} defaultValue={2500} />
    <FieldDescription>Between 50 and 50,000 SAR.</FieldDescription>
  </Field>
);

Parse a pasted value yourselfCopy Anchor Link

import { parseMoney } from "@fadymondy/nasaq/web";

const minor = parseMoney("١٬٢٥٠٫٥٠ ر.س.", { currency: "SAR", locale: "ar", paste: true }); // 125050
export { minor };

AccessibilityCopy Anchor Link

• The input has inputMode="decimal" (numeric for 0 decimals), so phones show a number pad.
• Pass aria-label, or put the field inside a Field with a FieldLabel.
• An out-of-range amount sets aria-invalid and adds screen-reader text; the message beside the field is yours to write.

RTL & i18nCopy Anchor Link

• The input is always left to right (dir="ltr"): amounts read the same in Arabic and English. The symbol sits on the side the locale uses ($1.00 at the start, 1.00 US$ at the end), inside a bdi.
• Type or paste ٠١٢٣٤٥٦٧٨٩, ۰۱۲۳, ٫ (Arabic decimal), ٬ (Arabic thousands) and ، (Arabic comma): all read correctly. Display defaults to Western digits like the rest of Nasaq; pass numberingSystem="arab" for editorial forms.
• Typing treats . and the locale's decimal mark as the decimal point and drops other marks. Pasting is smarter: 1,250 is 1250, 1,25 (German) is 1.25.

Styling & tokensCopy Anchor Link

• Uses the InputGroup tokens (--nq-control, border, focus ring). The picker is a Select inside the group.
• data-invalid on the group when invalid or out of range. Extend with className.

Do / Don'tCopy Anchor Link

• Do store and send the minor-unit integer.
• Do keep the currency next to the amount in your model: minor units mean nothing without it.
• Don't divide by 100 yourself: KWD has 3 decimals and JPY none. Use currencyDecimals or the helpers.
• Don't multiply floats (19.99 * 100); use majorToMinor or parseMoney.

RelatedCopy Anchor Link

• Numeric · Price · PhoneInput · InputGroup

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-forms-currency-input--docs