All components (204)

Number field

Fields · NumberField

What it is and when to use it

A number formatted for the language: in es-ES an amount is written and read 1234,56 €, with a decimal comma. With buttons it works like the quantity selector, − 12 +: the minus in front, the plus behind and the figure in the middle.

When to use it

Amounts, percentages, units, weights: everything that is added up, compared or has a minimum and maximum.
format: currency (euros), percent (stored as a fraction of one: 0.21 is shown as 21 %), integer or decimal. formatOptions to fine-tune it (another currency, fixed decimals).
withoutSteps in amount columns or when the step makes no sense (a weight with decimals): without buttons, the figure goes to the right.

When not to

A number that is not operated on (a phone number, a postal code, an ID number): that is text, TextField or its composite fields.
A cart quantity: QuantityPicker, more compact.

Keyboard: it is a text field with a decimal keyboard, not an <input type="number">: the mouse wheel does not change the figure. Up Arrow and Down Arrow raise and lower one step, Page Up and Page Down ten steps, and Home and End take it to the minimum and the maximum if there are any; minValue, maxValue and step are respected. What is typed is adjusted to the format on leaving the field or with Enter. The buttons are not in the Tab order: with the keyboard the arrows are used.

Accessibility: the label is required. The help and the error are read as the field's description. With touch, the box becomes 48 px, the buttons 44 and the font 16 px, so the iPhone does not zoom the page.

Fine-tuning: it has no variables of its own. The height, padding, font, radius, background and border come from those of the field (--amset-field-*), and the increase and decrease buttons are sized from --amset-field-height, so changing it moves them along with the box. To tweak only this field, the rule goes on the .amset-field of the container that wraps it, not on :root.

Context: it goes inside LocaleProvider (or AmsetProvider), which decides the format.

What it looks like

Units

Amount

VAT

<NumberField label="Units" format="integer" defaultValue={3} minValue={0} />
<NumberField label="Amount" format="currency" defaultValue={1234.5} minValue={0} step={0.01} />
<NumberField label="VAT" format="percent" defaultValue={0.21} minValue={0} maxValue={1} step={0.01} />

Props

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

Prop	Type	What it does
`label`required	`string`	—
`className`	`string`	—
`decrementAriaLabel`	`string`	—
`defaultValue`	`number`	—
`disabled`	`boolean`	—
`error`	`string`	—
`format`	`NumberFormat`	Format of the number. `currency` uses euros; for another currency, pass `formatOptions` directly.
`formatOptions`	`Intl.NumberFormatOptions`	The `Intl.NumberFormat` options, if the format above is not enough.
`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`	—
`id`	`string`	—
`incrementAriaLabel`	`string`	What the two arrows are called for a screen reader. By default "Increase" and "Decrease", which work for a lone quantity; in a field that lives among others ("Increase the quantity of T-shirts") the generic name repeats as many times as there are fields and stops distinguishing.
`inputRef`	`Ref<HTMLInputElement>`	The real `<input>`, to focus it or select its text from outside.
`invalid`	`boolean`	—
`maxValue`	`number`	—
`minValue`	`number`	—
`name`	`string`	The name it travels under in a native form. What is sent is the number (`10.5`, `0.21`), with a dot and no formatting, and empty if there is no figure: not the text you see (`10,5`, `21 %`), which a server cannot read.
`onChange`	`(value: number) => void`	Notifies the new figure. If the field is emptied, it notifies `NaN`: the usual "no value".
`onChangeEvent`	`(event: ChangeEvent<HTMLInputElement>) => void`	The `<input>` event on every keystroke (AMS-735). Careful: `e.target.value` is the TEXT being typed ("1.234,5"), not the number; the number comes from `onChange`, once what was typed is valid.
`placeholder`	`string`	—
`readOnly`	`boolean`	—
`required`	`boolean`	—
`size`	`"sm" \| "md" \| "lg"`	—
`step`	`number`	—
`value`	`number`	—
`variant`	`FieldVariant`	—
`withoutSteps`	`boolean`	Removes the decrease and increase buttons, which sit on either side of the value (`− 12 +`) with the figure centred. Without them the figure goes to the right, which is how amounts line up in a column. The keyboard works the same.

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: