What Form Element Should You Use for Numbers?

When designing form elements for numeric input, these questions could help:

1: Are you selecting from a short range of numbers?

If you’re selecting a short range of numbers, say 1 – 5, then consider using radio buttons, or a group of buttons with a label for each number (combined with a hidden form field to retain the selected value). This is easier for users than a text box for several reasons

  • For touch/mobile, it’s one-action: just tap the number.
  • For desktop, the user can just click the number. (They won’t have to position the mouse cursor, and then press the key on their keyboard for the correct number.)
  • The selection can be designed to stand-out from the other numbers.

Some other tips when designing a selection of numbers:

  • If using an accompanying checkbox/radio button, wrap the radio button and the number in a label. This allows the user to click the number, and not have to precisely touch the checkbox/radio button.
  • For desktop, add a hover effect to highlight the choice the user is pointing their mouse at.
  • Add a call to the checkbox/radio button’s blur() function when it’s clicked, to remove focus from an element that is so small, the user may not notice it has focus. (Useful for desktop.)

2: Are you allowing a wide range of numbers?

When selecting from a wide-range of numbers, it’s best to consider first how the user will enter the number, and how best you can guess their input. For example, if you have a range of 0 – 5,000.00, with decimal numbers, it’s best to allow the user to enter the number directly, and then check the format with JavaScript.

  • HTML: <input type=”number” min=”0″ max=”5000.00″ step=”0.01″/>
  • JavaScript: Attach an event to the input’s blur() handler, so the value is checked when the user moves to the next input field.
  • JavaScript: Check the format on the forms submit() handler, in case the user submits the form from the field by pressing enter on their keyboard.

Also consider the device the user is accessing your form on. If the range is, say, 0 – 100, you may be able to get away with building a slider for touch / mobile. This allows the user to perform one action: swipe the slider with their finger. The alternative, using a text field, can get annoying:

  1. The user has to touch the text field, and bring up their device’s on-screen keyboard.
  2. The user has to touch each number individually.
  3. The user has to touch outside of the form field to close their device’s on-screen keyboard.

…and, we know that screen space is limited on smartphones and tablets. I personally find it annoying when I have to use the on-screen keyboard to select a simple value, such as a number between 1 and 10.