Money input

A currency field with live grouping, stable width, rolling digits, and minor-unit output.

$npx shadcn@latest add @silicon-ui/money-input

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/money-input

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/money-input/money-input.tsx
- components/silicon-ui/money-input/money-input.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { MoneyInput } from "@/components/silicon-ui/money-input/money-input";

Prop	Type	Default
`label*`	`string`	—
`hideLabel`	`boolean`	`false`
`value` Amount in minor units (cents for USD, yen for JPY). `null` is empty.	`number \| null`	—
`defaultValue`	`number \| null`	`null`
`onValueChange`	`(value: number \| null, details: MoneyInputDetails) => void`	—
`currency` ISO 4217 code, such as "USD".	`string`	—
`defaultCurrency`	`string`	`"USD"`
`onCurrencyChange`	`(currency: string) => void`	—
`currencies` Codes offered by the currency menu. Pass one code to hide the menu.	`string[]`	`["USD", "EUR", "GBP", "JPY", "CAD", "AUD", "CHF", "INR"]`
`min` Lowest amount in minor units. Checked when the field loses focus.	`number`	—
`max` Highest amount in minor units. Typing past it is refused with a nudge.	`number`	—
`quickAdd` Quick add chips in major units. Pass an empty array to hide them.	`number[]`	`[10, 50, 100]`
`step` Arrow keys move by this many minor units. Defaults to one major unit; Shift moves ten times as far.	`number`	—
`locale` Formatting locale. Fixed by default so server and client render the same digits.	`string`	`"en-US"`
`description`	`string`	—
`error` Replaces the built-in range message.	`string`	—
`disabled`	`boolean`	`false`
`name` Adds a hidden input carrying the amount in minor units.	`string`	—
`id`	`string`	—
`className`	`string`	—
`onBlur`	`(event: ReactFocusEvent<HTMLInputElement>) => void`	—

Also accepts the props of HTMLAttributes.