CurrencyInput

NumberInput preset for money — shows the locale currency symbol and fixes 2-decimal precision.

CurrencyInput is a NumberInput preset for monetary amounts. Give it a currency (ISO 4217 code like "USD") and it derives the symbol with Intl.NumberFormat, displays it as a prefix, and locks precision to 2 decimals with a 0.01 step. The controlled value is the amount in major units (or null when empty); pass locale to format the symbol for a specific region.

Example

Preview

€

import { CurrencyInput } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [amount, setAmount] = useState<number | null>(19.99);
  return <CurrencyInput value={amount} onChange={setAmount} currency="USD" />;
}

API

Prop	Type	Default	Description
currency*	string	—	ISO 4217 currency code (e.g. "USD").
onChange*	(value: number \| null) => void	—	Called with the parsed value (null when cleared).
value*	number \| null	—	Current value, or null when empty.
ariaLabel	string	—	Accessible name when no visible label is present.
disabled	boolean	—
invalid	boolean	—	Marks the field invalid for validation styling and `aria-invalid`.
locale	string	en-US	BCP 47 locale for formatting. Defaults to the runtime locale.
max	number	—	Maximum allowed value.
min	number	—	Minimum allowed value.
name	string	—	Form field name, for native form submission / form libraries.
placeholder	string	—
required	boolean	—
showSteppers	boolean	—	Show the stepper +/- buttons.
size	enum	—	Control size.
suffix	string	—	Unit suffix shown inside the field (e.g. "%").

Example

API

On this page