68

As you may know, with HTML5 when an input has type="number" the field is "customized". Two little arrows are added to the field (w3school example) but the numbers are still left aligned.

I saw that numbers should be right aligned (as discussed in this question).

Is it applying to input fields too? If so, why it's not implemented by default?

Improve this question

4 Answers 4

Reset to default
142

Number fields should not always be right-aligned

  1. It often makes sense to right-align numbers when they are being compared to other number fields (e.g. in financial statements). This can help comparability and scannability.

  2. However, sometimes number fields are unrelated or are mixed with text fields in a form, so left-alignment may promote better visual flow.

  3. Given #1 and #2, plus the fact that HTML controls tend to be left-aligned by default, it makes sense to also keep the HTML5 number control left-aligned by default.

Note that you can always change the text-alignment of the input through CSS or inline styles:

input[type=number] {text-align: right;}

<input type="number" style="text-align: right;">

Here are some examples of why right alignment doesn't always make sense:

right alignment can be disruptive when fields are mixed with text

Improve this answer
9
  • 11
    Good visuals. Though note the left example has decimals. At least on the web, this is still kind of a pain whether left or right aligned (though some JavaScript solutions exist). There is a specification for being able to align decimals, but no browser support yet: css-tricks.com/almanac/properties/t/text-align
    – DA01
    Jul 23, 2015 at 18:33
  • 6
    @Crissov there's no assumption: the answer suggests that the designer should consider visual flow. The examples are just that (i.e. examples, not prescriptions). In RTL forms it may be much easier to resolve this because everything may be right aligned.
    – tohster
    Jul 23, 2015 at 23:42
  • 3
    @tohster The CSS property direction: rtl; is more appropriate for number fields. They also change the position of the arrow buttons in browser that add them.
    – jazZRo
    Jul 24, 2015 at 9:23
  • 3
    Numbers with decimals should be aligned by the decimal dot (on the UI should add .00 to any whole numbers, in case of money).
    – gerrit
    Jul 24, 2015 at 18:12
  • 4
    You should not mix rlt text in the middle of ltr text. "0.5" shows as 0.5, but ".5" shows as 5., "-2" shows as 2-, etc.
    – ANeves
    Jul 27, 2015 at 13:14
9

I see two issues off the top of my head with right aligning text in an input type ="number"

  1. When the number selector is not visible it looks quite strange with the number awkwardly floating a bit off from the right.

  2. When there is a number already filled in, and you want to add more digits to it, you have to click in the small margin between the last number and the number selector. This isn't easy with a mouse and I can't even imagine it with a touchscreen.

See this fiddle, try to add a digit to the end of the text: http://jsfiddle.net/qp5g4ro0/

NOTE: Both of these problems could be fixed with clever implementation I am sure, but by default they are troublesome.

Improve this answer
8
  • 1
    #2 is a good concern, though likely remedied with some thoughtful CSS. (I actually find the up/down arrows a bigger issue...I've never found those to be particularly useful UI element.)
    – DA01
    Jul 23, 2015 at 16:18
  • @DA01 Even if they're not actually used, they signify that the input field is only for numbers.
    – bjb568
    Jul 23, 2015 at 16:40
  • Good point, perhaps this is why the spinner (up/down arrow) are usually outside or at least clearly delineated from the field: google image search.
    – Forthright
    Jul 23, 2015 at 17:40
  • @bjb568 while true, I'd argue there's better ways to give a visual cue that the field is only for numbers, but I digress...that's really a whole other topic...
    – DA01
    Jul 23, 2015 at 18:03
  • @DA01 agreed, rarely is the number small enough to tick up through it one by one, and if it is then I'd implement a better looking number picker, but yes thats a different topic
    – DasBeasto
    Jul 23, 2015 at 18:14
7

As with a lot of UX questions, the answer is 'it depends'. Numbers are right aligned because it makes them easier to compare. In an input field however, you may be entering numbers where it makes sense to compare, or you may not. Because you can't say with confidence, it makes more sense to left-align numbers by default than to right align.

Improve this answer
1
  • In Excel, the number is at the left until you leave the field ('entering' the value).
    – user67695
    Apr 18, 2017 at 14:56
2

Whether numbers should be left aligned vs. right aligned (vs. decimal aligned) is based on the context they are being used in.

Since that can change, there's no 'correct' default.

Improve this answer
1
  • Can you identify different contexts and how they change the way the text should be aligned?
    – A.L
    Jul 27, 2015 at 9:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.