Why aren't HTML5 typed number inputs right aligned, and should they be?

  • 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?

  • tohster

    tohster Correct answer

    6 years ago

    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

    Top notch answer! Basically, it's a choice so you as the developer need to know when to use it

    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/

    This answer assumes left-to-right text, though.

    @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 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.

    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.

    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)

    Numbers with decimals should be aligned by the decimal dot (on the UI should add .00 to any whole numbers, in case of money).

    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.

License under CC-BY-SA with attribution


Content dated before 7/24/2021 11:53 AM