form · Normal DOM + Twenty Remote DOM

MoneyInput

Numeric input with a currency-symbol prefix — stores micros.

Always stores the value in micros (`1.00 EUR = 1_000_000`) to keep precision through multiplication chains in priced lists. Commits on blur / Enter. The currency code only drives the prefix symbol; rendering of formatted totals elsewhere is the caller's job.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { MoneyInput } from '@8maverik8/twenty-design';

Examples

Basic

Unit Price

€

314.00 EUR (micros: 314000000)

tsx
const [v, setV] = useState(314_000_000); // €314.00
return <MoneyInput valueMicros={v} currency="EUR" onChange={setV} />;

Multiple currencies

€

tsx
<MoneyInput valueMicros={99_000_000}  currency="USD" onChange={setUsd} />
<MoneyInput valueMicros={91_500_000}  currency="EUR" onChange={setEur} />
<MoneyInput valueMicros={75_000_000}  currency="GBP" onChange={setGbp} />

Guidelines

✓

Store the raw value in micros throughout the form state.Floating-point multiplication of decimals introduces drift; integer micros do not.

Use it for non-monetary numeric inputs.NumberInput is the right component for quantities, counts, and ranges.