MoneyInput · ui.voila.dev

<MoneyInput
	value={amount}
	onValueChange={setAmount}
	currency="EUR"
	currencyLabel="Currency"
/>

With no onCurrencyChange the trailing select is locked, for the common case of an app that settles in one currency. The amount field stays fully legible either way — a disabled currency must not grey out the number next to it.

API

Prop	Type	Default
`currency`	`string`	required	Selected currency code (e.g. `"EUR"`).
`currencyLabel`	`string`	required	Accessible name for the currency select.
`onValueChange`	`(value: string) => void`	required	Receives the raw amount string on every change.
`value`	`string`	required	Raw amount as typed (e.g. `"120"` or `"120.50"`).
`className`	`string`	—	Wrapper class (width/layout), forwarded to the `InputGroup`.
`currencies`	`readonly string[]`	`[currency]`	Currency codes offered by the select. Defaults to the single `currency`.
`currencyDisabled`	`boolean`	`currencies.length <= 1`	Locks the currency select. Defaults to `true` when there is a single currency to choose from, so the platform's single-currency case reads as a disabled selector rather than a bare suffix.
`onCurrencyChange`	`((currency: string) => void)`	—	Receives the selected currency code. Omit when the select is locked.
`defaultValue`	`string \| number \| readonly string[]`	—	The default value of the input. Use when uncontrolled.
`render`	`ComponentRenderFn<HTMLProps, InputState>` \| `ReactElement<unknown, string \| JSXElementConstructor<any>>`	—	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
`style`	`CSSProperties` \| `((state: InputState) => CSSProperties` \| `undefined)`	—	Style applied to the element, or a function that returns a style object based on the component's state.

Plus the DOM props of the element it renders. Source: money-input/components/money-input.tsx.