All components (204)

Amount field

Fields · MoneyField

What it is and when to use it

A money input that understands how it is written in each language: decimal comma in Spanish, point in English, thousands separator, and the currency symbol if someone pastes it. What comes out of onChange is a number, never a string.

When to use it

A price, an instalment, an invoice amount: any sum of money that someone types.
currency decides the decimals and the symbol (EUR by default; the yen has no decimals).
min, max and allowsNegative raise the error when leaving the field, in words.

When not to

Displaying an amount: Amount.
A quantity that is not money (units, kilos): NumberField.

Keyboard: that of a text field, with the numeric keypad on mobile (inputmode="decimal"). While typing nothing is rearranged: neither the cursor nor a separator in the middle of a figure. On leaving, it is written in its format (1,234.56 €) and on entering it goes back to the editable form (1234.56).

Accessibility: it is a TextField, with its label, help text and error linked. The error appears on leaving, not on every keystroke.

Fine styling: no variables of its own: it uses the field ones, --amset-field-*, with fixed-width figures.

What it looks like

Sale price

VAT rate

Base €129.90 + VAT €27.28 = €157.18.

<MoneyField label="Sale price" value={precio} onChange={setPrecio} max={5000} />
<VatRateSelect value={iva} onChange={setIva} />

Props

Import it with import { MoneyField } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	Required: a field without a visible label does not get into the library.
`allowsNegative`	`boolean`	With `false` it does not accept negative values. `false` by default.
`back`	`ReactNode`	Content behind the text: a unit ("€"), a copy button.
`className`	`string`	—
`currency`	`string`	The currency: `EUR` by default. It decides the decimals and the symbol.
`disabled`	`boolean`	—
`error`	`string`	Error message. When it is passed, the field is marked as invalid.
`front`	`ReactNode`	Content before the text: an icon, a prefix ("+34").
`hiddenLabel`	`boolean`	The label for the screen reader only. For when the field sits inside something that already explains itself (a table cell, a group of filters), never to save space.
`hint`	`string`	Permanent hint text below the field. It does not replace the label.
`initialValue`	`number \| null`	The amount at the start, without controlling it from outside.
`inputRef`	`Ref<HTMLInputElement>`	The real `<input>`, to focus it, select its text or measure it from outside. It is separate from `ref` because the component paints a box with label, hint and error, and whoever asks for a ref almost always wants the control.
`invalid`	`boolean`	—
`max`	`number`	The maximum accepted.
`min`	`number`	The minimum accepted. Below it, the field shows the error on leaving.
`onChange`	`(value: number \| null) => void`	Delivers the number (`1234.56`) or `null` if the field is empty or cannot be understood.
`onChangeEvent`	`(event: ChangeEvent<HTMLInputElement>) => void`	Like `onChange`, but with the native event of the `<input>`: `e.target.value`, `e.currentTarget`... It exists to migrate a front end that already writes its handlers with the event (AMS-735). If you only want the text, `onChange` already gives it to you.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	`aria` (the default) announces the state without the browser interrupting submission with its bubble; `native` also adds its own validation.
`value`	`number \| null`	The amount, controlled from outside. `null` means the empty field.
`variant`	`FieldVariant`	—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: