[number field] Add Number Input 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).

• 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" has limitations:

• Firefox and Safari are allowing to type any value, even non-digit characters Textfield type="number" allowing non-numeric values in firefox #18923
• Chrome allows entering any amount when max is set: [TextField] type=number missing min, max, step Typescript types #9313 (comment). It should likely round to the max when blurring the field.
• Chrome allows chars like e, [TextField] type="number" limitations #10582.
• Using the mouse wheel changes the value, instead of scrolling [TextField] type="number" limitations #10582 (comment), [TextField] How to prevent mousewheel in input of type number? #7960

TODO

• Update: https://mui.com/material-ui/react-text-field/#type-quot-number-quot when this is released.

Benchmarks

https://mui-org.notion.site/Input-Number-component-364825a7bec94381809ac11ff05b4cc0

[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