<input type="number"> elements will increment/decrement by its
When someone uses the arrow keys in the input field, we want the following to happen:
- If they press up or down, we want to add or subtract 1
- If they hold SHIFT and press up or down, we want to add or subtract 10
- If they hold ALT and press up or down, we want to add or subtract 0.1
- If they hold CTRL and press up or down, we want to add or subtract 100. On Mac, we want to use the CMD key for consistency.
💡 Did you know the DevTools in your browser also support these modifier keys? Try editing a numeric value and press up/down while holding
⚠️ In some cases you’ll most likely be better off by avoiding
<input type="number">, and should use go for
<input type="text" inputmode="numeric" pattern="[0-9]*"> instead`.