Material-ui: Add InputNumber component

[m4theushw]

I noticed in the Material-UI's roadmap a Numeric Input component to be built. If nobody has took the lead then I can help. Recently I had to develop a component like that for a personal project (first screenshot below).

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I didn't look deeply but I think about a <NumericField /> wrapping a <TextField />. This text field component would render the step buttons.

Examples 🌈

Motivation 🔦

Sometimes we want to force an input to only accept numbers, but the support for type="number" is not consistently across browsers (#18923). Firefox and Safari are allowing to type any value, even non-digit characters. The native step buttons break the app's visual identity. In Chrome mobile these buttons are missing.

Benchmark

• https://www.nngroup.com/articles/input-steppers/
• https://trello.com/c/G5QonSWb/2681-inputnumber-component

[dcworldwide]

It would need to support floating point numbers in addition to integers. With the ability to set precision ranges.

My project's current solution was to wrap TextField.

Is adding generic mask property for TextField sufficient? That is more generic....as it ensures userland can define the content for their needs...phone numbers, bank account numbers and of course floats, integers. As these are common...const regex patterns provide by mui would be nice.

[m4theushw]

It would need to support floating point numbers in addition to integers.

@dcworldwide I don't know, step buttons are not very useful with continuous quantities.

Is adding generic mask property for TextField sufficient?

For phone numbers, bank account numbers or currency, masks solve the problem. But to enforce a minimum/maximum value or a custom step (0, 2, 4, 6) regex patterns become huge.

Maybe I need redefine what kind of numeric input I am talking. I see an opportunity for an _integer field_ and a _floating-point field_.

[mbrookes]

https://elemefe.github.io/element-react/#/en-US/input-number

[m4theushw]

I'm thinking about starting a draft for NumericField. To support currency values should we (1) use Intl.NumberFormat, (2) extend the Material-UI's localization API or (3) delegate all formating to user?

[yehonadav]

i would vote to start with (3)

[msalahz]

https://stackoverflow.com/questions/47798104/set-min-max-on-textfield-type-number