Form design: when to use the number input

This is an excerpt from Form Design Patterns. We’re in the middle of chapter 2, A Checkout Form, where we’ve been looking at the payment details form consisting of card number, expiry, security code from fields etc.

The number input (<input type="number">) lets mobile users more quickly type a number via a numeric keypad. On desktop, the input will contain increment and decrement buttons called spinners, which make it easy to make small adjustments without having to select and type.

(Note: spinner buttons are tiny and hard to use which I’ll address later. And scrolling can interfere with number inputs.)

See original post