Add NumberInput component

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 #18923
• Chrome allows entering any amount when max is set: https://github.com/mui-org/material-ui/issues/9313#issuecomment-731267593. It should likely round to the max when blurring the field.
• Chrome allows chars like e, #10582.
• Using the mouse wheel changes the value, instead of scrolling https://github.com/mui-org/material-ui/issues/10582#issuecomment-603118446, https://github.com/mui-org/material-ui/issues/7960

Benchmarks

• https://twitter.com/devongovett/status/1389992231029800968
• https://www.nngroup.com/articles/input-steppers/
• https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
• https://elemefe.github.io/element-react/#/en-US/input-number
• https://ant.design/components/input-number/
• https://siriwatknp.github.io/mui-treasury/?path=/story/component-numberinput--default
• https://siriwatknp.github.io/mui-treasury/?path=/story/component-numberspinner--outlined
• https://chakra-ui.com/numberinput
• Figma input number
• Sketch input number
• https://react-spectrum.adobe.com/blog/how-we-internationalized-our-numberfield.html
• https://www.figma.com/purchase-organization/details

• https://vaadin.com/store?sku=pro&currency=usd

• https://www.qt.io/webshop/

[aurorapete]

I wanted to chime and say that, from a product designer’s perspective, an incrementer would be very useful to have in Material UI. The software I use on a daily basis (Figma, Adobe products, Cinema 4D) uses this kind of field all the time, and because I work on apps at my company which involve similar visualization and manipulation of values, I want to be able to provide this kind of a control to our users. Pasting a small mockup of the sorts of things we would want it do in our case.

So, I’m mainly just chiming in here to say this would be a really valuable to provide in Material UI, and it could help product designers like me advocate more strongly for Material UI in our various spheres of influence. Cheers.

[violabg]

any update on this component?