numberInputFormat

Single field: type digits and the thousands separators appear automatically. Try editing in the middle, or backspacing onto a separator — the caret stays where you expect. Type - to make it negative, and again to take it back.

Quantity Whole or decimal number, unlimited decimals

Wrapper scope: data-js-behavior sits on the surrounding element, so every data-numberinputformat field inside it is formatted. Both fields arrive pre-filled and are re-grouped on load.

Two decimals, and what the form posts: the price field caps the fraction at two digits while typing and pads to two on blur. It also carries data-numberinputformat-submit, so its name moves to a hidden input holding 1234.56 — while the quantity field beside it posts what it shows. The form is a plain GET to this page, so press Submit and read the query string in the address bar.

Two things that lane hands to you, both accessibility: your server only ever sees the hidden input, so an error message has to be wired to the visible field (WCAG 3.3.1) — and a redisplayed value goes back into the visible field, where the module re-reads it. That round trip is safe, and the price field below demonstrates it: its authored value is the machine value 1234.500, exactly as a server would send it back. A separator with four digits in front of it cannot be a grouping — grouped, that number reads 1.234.500 — so it is a decimal point, and the field shows 1.234,50 rather than one and a bit million. A first group of 0 settles the same question the other way round: 0.999 comes back as 0,999, because nobody writes 999 as 0.999.

One thing that lane does not hand back: the cap cuts a value that arrives whole. Typing cannot exceed decimals="2" in the first place, but a redisplayed 1234.567 enters this field as 1.234,56 — truncated, not rounded, because 1.234,57 would be a calculated value and this component does not calculate. So do not send back more decimals than the field accepts.

Paste from another locale: copy 1,234.56 (English) into the German field below. Two different separators are present, so the last one is the decimal point whatever the page's language — it arrives as 1.234,56. A lone separator is genuinely ambiguous and the page decides: 1.234 pasted here is one thousand two hundred and thirty-four, while 12.5 is twelve and a half, because three digits after a separator is a grouping and one is not. Both sides have to look like one: 1234.560 has four digits in front, and a grouped number never does — grouped it would read 1.234.560 — so that separator is a decimal point too. Nor does a grouping ever start with a zero, so 0.999 is nine hundred and ninety-nine thousandths, and 0012.50 loses its padding on the way in and arrives as 12,50.

Paste target Try 1,234.56 — 1.234 — 12.5 — 1234.560 — 0.999 — 0012.50 — 1 234,56

Integers only, right-aligned: data-numberinputformat-decimals="0" refuses a decimal separator altogether, and the alignment is the stylesheet's --numberField-text-align knob — a column of amounts reads better flush right.

Population Whole numbers only