58

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?

130

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 (e.g. <input type="number" style="text-align: right;"> or <input type="number" style="direction: rtl;">).

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

right alignment can be disruptive when fields are mixed with text

  • 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 '15 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 '15 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 '15 at 9:23
  • 2
    While I think it’s not meant this way, this answer gives the idea that it is always better to have the same alignement for all fields in a form. I work on financial software and keep all number fields right aligned across the system, even when mixed with left-aligned text fields. This makes more sense for the workflow in this kind of software. – jazZRo Jul 24 '15 at 9:51
  • 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 '15 at 18:12
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.

  • #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 '15 at 16:18
  • @DA01 Even if they're not actually used, they signify that the input field is only for numbers. – bjb568 Jul 23 '15 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 '15 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 '15 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 '15 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.

  • In Excel, the number is at the left until you leave the field ('entering' the value). – user67695 Apr 18 '17 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.

  • Can you identify different contexts and how they change the way the text should be aligned? – A.L Jul 27 '15 at 9:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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