Inputs

Amount inputPro

A money field that takes its decimals and symbol from the currency and its grouping from the locale, with an optional currency switch.

npx prodular-ui add amount-input

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

Payment against an invoice

The value is a number in major units. formatAmount prints totals the same way the field does.

"use client"
import * as React from "react"
import { AmountInput, formatAmount } from "@/components/ui/amount-input"import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
const outstanding = 18400
export default function AmountInputInvoice() {  const [amount, setAmount] = React.useState<number | null>(12500)  const rest = Math.max(0, outstanding - (amount ?? 0))  const over = (amount ?? 0) > outstanding
  return (    <Field className="w-full max-w-72" invalid={over}>      <FieldLabel>Payment received</FieldLabel>      <AmountInput currency="USD" locale="en-US" value={amount} onValueChange={setAmount} min={0} aria-invalid={over} />      <FieldDescription className="tabular-nums">        {over          ? `More than the ${formatAmount(outstanding, "USD", "en-US")} outstanding on INV-2087.`          : `${formatAmount(rest, "USD", "en-US")} left on INV-2087 for Northwind Logistics.`}      </FieldDescription>    </Field>  )}

Currencies and locales

PLN puts the symbol after the number, JPY has no decimals, EUR in de-DE uses a comma for decimals.

"use client"
import * as React from "react"
import { AmountInput, formatAmount } from "@/components/ui/amount-input"import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
const locales: Record<string, string> = { USD: "en-US", EUR: "de-DE", PLN: "pl-PL", JPY: "ja-JP", GBP: "en-GB" }
export default function AmountInputCurrencies() {  const [currency, setCurrency] = React.useState("PLN")  const [amount, setAmount] = React.useState<number | null>(48250.5)  const locale = locales[currency]
  return (    <Field className="w-full max-w-80">      <FieldLabel>Approval limit</FieldLabel>      <AmountInput        currency={currency}        currencies={Object.keys(locales)}        onCurrencyChange={setCurrency}        locale={locale}        value={amount}        onValueChange={setAmount}        min={0}      />      <FieldDescription className="tabular-nums">        Payments above {formatAmount(amount, currency, locale) || "this amount"} need a second approver. Switch to JPY and the decimals go.      </FieldDescription>    </Field>  )}

Anatomy

<Field>  <FieldLabel>Payment received</FieldLabel>  <AmountInput currency="USD" locale="en-US" value={amount} onValueChange={setAmount} /></Field>

Guidance

Use it when

Prices, limits, payments, budgets: any amount of money people type.
currencies when the same form handles several, with onCurrencyChange to switch.

Avoid

Percentages or counts. Use Number input with a unit.
Hardcoding the symbol in a prefix. The currency and locale decide it.

Rules for AI agents

Published in llms-full.txt and the registry, so coding agents follow them when they build with this component.

Always pass currency as an ISO 4217 code and the user's locale. Never hardcode $ or decimals.
Keep the value in major units (12.50, not 1250). Convert to minor units only at the API boundary.
Show totals and summaries with formatAmount(value, currency, locale) so they match the field.
Label it with Field and FieldLabel, and put limits in min and max.

API

AmountInput

Prop	Type	Default	Description
currency	string		ISO 4217 code. Sets decimals and symbol.
locale	string		Grouping, decimal mark and the side the symbol sits on.
currencies / onCurrencyChange	string[] / (code) => void		Shows a currency switch at the end of the field.
display	"symbol" \| "code"	"symbol"	Show USD instead of $ where the symbol is ambiguous.
value / onValueChange / min / max	number \| null		Same as Number input, in major units.

formatAmount

Prop	Type	Default	Description
(value, currency, locale)	string		Formats an amount the way the field shows it.