Design Number and Currency Inputs

Forms & Inputs · forms, validation, checkout

Updated 2026-07-28

Show the numeric keypad on touch devices. Making someone switch keyboards to type an amount is a small failure repeated on every entry.
Accept the way people actually type numbers, including separators, spaces, and a comma where they expect a decimal point, then normalise it yourself.
Put the currency symbol and the unit in the field, not only in the label. Users check the amount, not the surrounding text, before they confirm.
Format on blur rather than on every keystroke. Reformatting while typing moves the caret and makes correction infuriating.
Be careful with steppers. They are useful for small counts and useless for a price, and they must never be the only way to enter a value.
Never let a scroll wheel change a focused number. It turns an accidental scroll into a silently altered amount.
State the precision you accept, and say what happens to extra decimals rather than rounding them away invisibly.
Validate the range with a specific message. "Enter an amount between 1 and 500" is actionable, and "Invalid amount" is not.
Keep alignment and precision consistent between the input and the value shown back to the user, so the confirmation obviously matches what was typed.

Number entry is where small formatting decisions turn into real financial mistakes, so forgiveness on input and clarity on output both matter.