[Number input] control update

[aagonzales]

Original prompt:
Explore other control options besides the up/down carets.

---

Final decision:
#5417 (comment)

[laurenmrice]

thoughts?

[laurenmrice]

Also ones still using carets:

[aagonzales]

I like A B C

• I think the + and - read better than the chevron icons which are normally used for opening/closing things.
• I can't actually decided between A and C if the full lines or half line is better.
• I like B because it seems like a more natural order for the control.

[laurenmrice]

Yeah the chevron one could be confusing. I think B is nice visually. But now wondering where error state icon would go. could work better for A or C.

[tw15egan]

Would this just make the mobile version the default? It would be a pretty easy change if we decide to go to B (would just need to change the icons and extend the border, possibly other things my dev eyes are missing)

Current mobile version:

[laurenmrice]

Yeah I was wondering about that too. ^^ I notice the mobile version also does not include the invalid icon. Wasn't sure where to put that other than outside of the field. Looked wonky inside or attached on the outside.

[tw15egan]

Yeah I agree, we could always render the error icon next to the error text 🤷‍♂

[laurenmrice]

The input alignment could get weird with B if in a form if we want it to have some sort of text alignment. We would prob have to center the input text, and even if we left aligned it, it would never really align with anything because there is a button on the left.

Kind of thinking C is the best option with full rule lines and is less fussy than A with the shorter rules. (however i know the fluid inputs have a smaller rule because the label is in the field)

---

Also this is Petes mobile number input for reference:

[tw15egan]

Makes sense to me 👍

[laurenmrice]

Final design

---

Final spec