KQ-1167 · COIN/AMOUNT

Coin Amount

A currency amount field that counts the cash out as you type: beside the figure a tray keeps one pile per place value — coins for cents and ones, notes for tens and hundreds, strapped bundles from thousands — each holding exactly its digit, and every new piece falls under gravity and lands with a squash on springs.recoil while the figure's own digits roll into place on springs.snap. Clearing sweeps the tray off to the right on the exit ease, and a conversion odometer under the field rolls on springs.snap. It is a real text input that places the grouping as you type and keeps the caret among the digits; Escape or the clear button empties it.

KQ-1167 · COIN/AMOUNT

Amount to send

About €1,181.60, at 1 USD to 0.92 EUR.€0 0123456789,0 01234567890 01234567890 0123456789.0 01234567890 0123456789

Available: $4,812.30

sending $1,284.35 · 1 bundle · 10 notes · 12 coins

Open it on the Atelier stage

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/coin-amount

Props

label: string; default —; What the amount is for. The field's visible label.
value / defaultValue: number | null; default null; The amount, controlled or initial; null is an empty field.
onValueChange: (value: number | null) => void; default —; Fires from the key, paste or clear that changed the amount.
currency: "usd" | "eur" | "inr" | "gbp"; default "usd"; The currency typed in: its symbol, grouping (lakh for rupees), notes and conversion pair.
convert: boolean; default true; Show the live conversion to a second currency under the field.
stack: number; default 0.4; How loosely the cash piles, 0 to 1: squared-off stacks at 0, a casual heap that lands harder at 1.
convertTo: "usd" | "eur" | "inr" | "gbp"; default —; The currency converted to. Defaults to the usual pair: euros for dollars and pounds, dollars for euros and rupees.
rate: number; default —; Units of convertTo per unit of currency. The default is an illustrative fixed rate; pass a live one.
locale: string; default —; The locale that groups and formats the figure. Defaults to the currency's own.
min: number; default —; The least amount accepted. Checked, never enforced while typing.
max: number; default —; The most accepted. Checked, never enforced while typing.
name: string; default —; Form field name; a hidden input carries the amount with two decimals.
placeholder: string; default "0.00"; Shown in an empty field.
hint: string; default —; Helper text under the field.
error: string; default —; An error from the host; replaces the hint and marks the field invalid.
required: boolean; default false; An empty field is invalid once it has been left.
disabled: boolean; default false; Turns the field off.
sound: boolean; default false; Play the coins and notes landing and the sweep. Only the visitor's own edits are heard.
className: string; default —; Classes for the root.

Prop	Type	Default	Description
label	string	—	What the amount is for. The field's visible label.
value / defaultValue	number \| null	null	The amount, controlled or initial; null is an empty field.
onValueChange	(value: number \| null) => void	—	Fires from the key, paste or clear that changed the amount.
currency	"usd" \| "eur" \| "inr" \| "gbp"	"usd"	The currency typed in: its symbol, grouping (lakh for rupees), notes and conversion pair.
convert	boolean	true	Show the live conversion to a second currency under the field.
stack	number	0.4	How loosely the cash piles, 0 to 1: squared-off stacks at 0, a casual heap that lands harder at 1.
convertTo	"usd" \| "eur" \| "inr" \| "gbp"	—	The currency converted to. Defaults to the usual pair: euros for dollars and pounds, dollars for euros and rupees.
rate	number	—	Units of convertTo per unit of currency. The default is an illustrative fixed rate; pass a live one.
locale	string	—	The locale that groups and formats the figure. Defaults to the currency's own.
min	number	—	The least amount accepted. Checked, never enforced while typing.
max	number	—	The most accepted. Checked, never enforced while typing.
name	string	—	Form field name; a hidden input carries the amount with two decimals.
placeholder	string	"0.00"	Shown in an empty field.
hint	string	—	Helper text under the field.
error	string	—	An error from the host; replaces the hint and marks the field invalid.
required	boolean	false	An empty field is invalid once it has been left.
disabled	boolean	false	Turns the field off.
sound	boolean	false	Play the coins and notes landing and the sweep. Only the visitor's own edits are heard.
className	string	—	Classes for the root.