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?

Community
  • 1
Alex
  • 3,094
  • 5
  • 23
  • 30

4 Answers4

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

Crissov
  • 2,508
  • 2
  • 17
  • 31
tohster
  • 41,070
  • 14
  • 107
  • 139
  • 1
    Top notch answer! Basically, it's a choice so you as the developer need to know when to use it – MonkeyZeus Jul 23 '15 at 17:25
  • 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: https://css-tricks.com/almanac/properties/t/text-align/ – DA01 Jul 23 '15 at 18:33
  • This answer assumes left-to-right text, though. – Crissov Jul 23 '15 at 23:24
  • 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 09: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 09:51
  • Tested the answer of @jazZRo and I must say that it makes muchr more sense to force RTL instead of aligning (in situations where you want the numbers to be right-aligned) – BlueCacti Jul 24 '15 at 11:56
  • 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
  • 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 '15 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.

DasBeasto
  • 15,318
  • 9
  • 57
  • 78
  • 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 '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
  • wrt #2 - I doubt most people are that accurate with button clicks in any event, and are quite prepared to use arrow or home/end keys to get the cursor where they want - I see lots of this behaviour when people are trying to add new text in a document, for example – HorusKol Jul 24 '15 at 02:21
  • To second point, you can use css style direction: rtl; for input which moves number selector to the left while value is on the right – Jaroslav Klimčík Aug 31 '16 at 06:30
  • @JaroslavKlimčík That reverses the input though, for example putting a 7 at the end of this number adds it to the beginning: http://jsfiddle.net/nrwndztp/ – DasBeasto Nov 07 '16 at 19:00
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.

Peter
  • 5,575
  • 1
  • 24
  • 25
  • In Excel, the number is at the left until you leave the field ('entering' the value). –  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.

DA01
  • 41,799
  • 5
  • 81
  • 142
  • Can you identify different contexts and how they change the way the text should be aligned? – A.L Jul 27 '15 at 09:26