Recipe
The right input for currency amounts
A money amount with decimals — 19.99 — entered on a digit pad.
<input type="text" inputmode="decimal" />iOS: simulated · not yet device-verified · scope iOS 26, Safari, en-US
Android · Gboard: simulated · not yet device-verified · scope Android 16, Chrome, en-US
Recipe updated 2026-07-25 · dataset 2026-07-24
inputmode="decimal" on a plain text input summons the digit pad with a
decimal-separator key — the keyboard users expect for money — while dodging
every documented type="number" trap: desktop scroll wheels silently changing
the value, stripped leading zeros, and the dictation and screen-reader failures
that made GOV.UK abandon type="number" entirely.
The separator key follows the device locale, not your page. A German-locale
iPhone shows a comma and no period, and setting lang on the element does not
change the key. Parse and validate accepting both . and ,.
There is no minus key on iOS digit pads. If refunds or adjustments can be
negative, model the sign outside the field — a credit/debit toggle — instead of
expecting anyone to type -.
For whole-number amounts (quantities, years, PINs), drop to
inputmode="numeric" and lose the separator key as well.
Gotchas
The decimal separator follows the device locale
The iOS decimal pad is locale-dependent: a German-locale iPhone shows a comma key and no period. Setting lang on the element or page does not change the key.
Do: Accept both "." and "," when parsing and validating; never assume which separator key the user saw.
CSS-Tricks: Everything You Ever Wanted to Know About inputmode (comment thread)
No minus key on iOS digit pads
The iOS numeric and decimal pads have no minus key. Negative values need a different strategy: a full keyboard, a sign toggle in your UI, or a separate control.
type="number" is a trap
type="number" misbehaves in ways the keyboard alone can't show: desktop scroll and arrow keys silently change the value, leading zeros are stripped, and Dragon or NVDA users hit dictation and labeling failures. On iOS it also shows the QWERTY number row, not a digit pad.
Do: For codes, PINs, and other digit strings use type="text" inputmode="numeric" pattern="[0-9]*" (the GOV.UK pattern). Reserve type="number" for true quantities where spinner stepping helps.