InputCurrency

Input specialized for monetary values. Formats thousands and decimals as the user types; on onBlur, it pads the decimal with 00 to guarantee a consistent final value.

When to use

✅ Use when…	🚫 Avoid when…
Prices, salaries, amounts in financial forms. When you want immediate formatting feedback (commas and dots appear as the user types).	For entering plain numbers with no monetary unit. Use `Input` with `type="number"`. For multiple currencies shown side by side. Consider customizing.

Example

<InputCurrency onChange={setValue} decimal="," thousand="." prefix="R$" />

Ticket variant (suffix + attached chips)

For a trade ticket: suffix paints the unit at the right edge of the control, and options attaches an Option chip row flush under it — percent of balance, for instance. The pair is one Field-sized stack: the input squares its bottom corners, the track squares its top corners, no form gap in between.

BRL

<InputCurrency
  suffix="BRL"
  options={[
    { value: '25', label: '25%' },
    { value: '50', label: '50%' },
    { value: '75', label: '75%' },
    { value: '100', label: 'Max' },
  ]}
  optionValue={pct}
  onOptionChange={applyFraction}
  onChange={setAmount}
/>

optionValue / onOptionChange are controlled by the consumer — the chips do not write the amount; map the fraction to a value in your handler. Name the row with optionsLabel when it is not a percent-of-balance picker.

Converting back to a number

import { currencyToNumber } from '@apollion-dsi/core/form/input-currency';
 
const handleSubmit = (values) => {
  const numericValue = currencyToNumber(values.salary, ',');
  saveToServer({ ...values, salary: numericValue });
};

Gotchas

Don't swap decimal/thousand across re-renders after the user has started typing — it breaks the formatting accumulated so far.

Properties


Prop	Type	Default	Description
`clearable`	`boolean`	—	Shows a clear button ("×" icon) when there is a value. Requires `reset` to work outside a `Form`.
`decimal`	`string`	`,`	Decimal separator.
`icon`	`any`	—	React element rendered inside the input (usually an `<Icon />`). When set, the input automatically makes room to avoid collision with the typed text. @example ```tsx <Input icon={<Icon icon={search} />} iconPosition="left" /> ```
`iconPosition`	`"right" \| "left"`	`'right'`	Side on which the icon (`icon` or the clear button) is rendered.
`onChange`	`((value: string) => void)`	—	Callback (debounced 250 ms) with the formatted string (including prefix).
`onOptionChange`	`((value: string) => void)`	—	Fired with the picked chip value.
`options`	`OptionItem<string>[]`	—	Ticket variant: a compact `Option` row (percent-of-balance chips, for instance) attached flush under the control — one Field-sized stack, no second form gap. Pair with `optionValue` / `onOptionChange`. @example ```tsx <InputCurrency options={[{ value: '25', label: '25%' }, { value: '50', label: '50%' }, { value: '100', label: 'Max' }]} optionValue={pct} onOptionChange={applyFraction} /> ```
`optionsLabel`	`string`	`Percent of balance`	Accessible name of the chip row (`aria-label` on the `radiogroup`).
`optionValue`	`string`	—	Selected chip of `options`.
`prefix`	`string`	`R$`	Currency unit prefix.
`reset`	`(() => void)`	—	Callback invoked when the user clicks the clear button (`clearable`). Inside a `Form`, it is injected automatically; in standalone use, it must clear the controlled state.
`size`	`"expansive" \| "medium" \| "compact" \| "micro"`	`'medium'`	Size token of the input.
`suffix`	`string`	—	Unit shown inside the control, at the right edge (an asset ticker, a unit). Inert text; the input reserves room for it like the icon slot. @example ```tsx <InputCurrency prefix="R$" suffix="BRL" /> ```
`thousand`	`string`	`.`	Thousands separator.
`value`	`string \| number`	—	Initial value — `number` is converted to `string` using `pt-BR`.
`variant`	`"default" \| "success" \| "error"`	`'default'`	Visual variant of the input — reflects the validation state.

In addition to the props above, every component accepts the layout props (spacing, color, flex/grid, sizing, border) — not repeated here.