Numbers in text boxes should be right-aligned

[Enyium]

SpinBox as well as LineEdit with input-type number or decimal should right-align their presented numbers by default.

[tronical]

Could you present us with any evidence that suggests this should be the case? All the spin boxes / buttons I've seen so far align to the left. Here are some examples:

• https://fluent2.microsoft.design/components/web/react/spin/usage
• Qt:
  • <input type=number>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number

[Enyium]

Just because you said all spin boxes you've seen were left-aligned: centered, centered, right-aligned, right-aligned (also follow-up pages in the left tree), right-aligned, right-aligned.

Specifically for spin boxes, especially when press-and-hold functionality is implemented, the number can easily jump when the text is left-aligned and the number of digits changes.

But you're right, when you do a Google image search for "spin box" or "ui with number text box", most of the widgets use left-aligned text.

There's a dedicated question on ux.stackexchange.com: "Why aren't HTML5 typed number inputs right aligned, and should they be?" TL;DR: It depends on the context what alignment is to be used.

So, the question is: What is the more sensible default? However you do it, there'll always be cases where an app wants it the other way. You could argue that desktop software (and embedded?) is more likely to present an unchanging, tweaking-oriented, repeatedly visited UI, while web apps are diverse, numerous, and more quickly left behind, and that this justifies right-aligning by default in the first case.

Conversation with GPT-4o about the topic

Me: > Should UI widgets like spin boxes and text boxes that only allow for number characters left- or right-align their text by default? Why, and are there precedential cases? GPT-4o: > In general, **right-alignment** is considered the preferred default for UI widgets like spin boxes and text boxes that allow only numeric input, such as quantities or measurements. This aligns with the convention used in many professional applications, especially in fields like accounting, engineering, or finance, where numbers are aligned by their decimal points or for easier comparison of values. > > ### Reasons for Right Alignment: > 1. **Consistency with Numeric Formats**: Numbers, especially those with decimals, are typically aligned at the decimal point, which is easier to achieve with right alignment. This allows users to quickly scan and compare values. > 2. **Improved Readability**: In fields where numbers are frequently compared, like spreadsheets or accounting software, right alignment is standard. It improves readability because digits are positioned consistently, making patterns and relationships between values more apparent. > 3. **Precedential Cases**: > - **Microsoft Excel and Google Sheets**: Cells containing numbers are right-aligned by default to facilitate comparison. > - **Financial Applications**: Many professional financial and accounting tools, like QuickBooks or SAP, follow this convention, reinforcing right alignment for numeric fields. > - **Scientific and Engineering Software**: Applications like MATLAB or AutoCAD also align numbers to the right in numeric input fields. > > ### Exceptions for Left Alignment: > Left alignment can be appropriate for numeric fields that involve **sequential or categorical numbers**, like phone numbers, ZIP codes, or IDs. These are treated more like strings than numeric values and often benefit from left-alignment for readability. > > In summary, while both left and right alignment are possible, right alignment tends to be preferred for numeric inputs due to better readability and established conventions in numeric-focused software. Me: > When you google for images of spin boxes and number text boxes, the majority of them have left-aligned text. Could this have anything to do with them not following the gold standard, or do they have good reasons for left-alignment, and should a new UI framework follow them and also left-align their numbers? GPT-4o: > It's true that many spin boxes and number text boxes are left-aligned by default, even though right-alignment is often seen in fields like accounting or spreadsheet applications. This discrepancy can be attributed to several factors: > > ### Reasons for Left Alignment in Practice: > > 1. **Consistency with Text Input**: Many UI frameworks use **left-alignment as the default** for all text-based input fields, including those that accept numbers. Since text input is typically left-aligned, it can be easier for developers to implement uniform alignment across different input types (text, numbers, etc.), reducing complexity in the design. > > 2. **Simpler UX**: Left-aligned text in number fields may feel more intuitive for **general users** who are accustomed to typing left-to-right. This is especially relevant in consumer-facing applications, where users expect immediate cursor movement from left to right as they input numbers. > > 3. **Mobile and Web Design Trends**: Modern web and mobile interfaces prioritize simplicity and familiarity. In many mobile apps and websites, left-aligned input fields for numbers are more common because mobile keyboards align the cursor left by default, making it feel natural for users. > > 4. **Common Practice in General-Purpose Applications**: Many everyday applications (e.g., form fields on websites, apps with user-entered data) may not require the precision that comes with right-alignment. These contexts prioritize **user-friendliness** over strict adherence to numerical alignment standards. > > ### Should a New UI Framework Follow Left-Alignment? > > While left-alignment is commonly used, this **doesn’t mean it’s inherently better** for all contexts. Whether a new UI framework should follow this trend depends on the nature of the application being built: > > - **For Numeric-Centric Applications** (e.g., finance, engineering, data analysis): Right-alignment is more appropriate because it facilitates easier comparison of numbers, especially when decimals or large values are involved. These users expect numbers to be aligned similarly to how they would appear in tables or spreadsheets. > > - **For General-Purpose Applications** (e.g., forms, consumer apps): Left-alignment may provide a **more familiar** experience to users and require less customization for developers. If the framework aims for widespread adoption across various use cases, left-alignment for numeric input may be seen as more "standard" for general users. > > ### Conclusion: > > The prevalence of left-aligned spin boxes and number text boxes doesn't necessarily reflect a gold standard but rather a practical choice in many consumer-facing and general-purpose applications. If the UI framework is targeted at **numerically focused** or **professional environments**, right-alignment should be considered. Otherwise, left-alignment can be a valid, user-friendly option in broader contexts.

[ogoffart]

Our default widget follow the platform guidelines. For example, the cosmic style has it centered: https://releases.slint.dev/1.7.2/demos/gallery/?style=cosmic

It should not be the default for line edit with number unless it is in the design of that platform.

LineEdit already has a horizontal-alignment property you can use. And you can make your own SpinBox if you need to.