Add NumberInput component
See original GitHub issueI 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
Issue Analytics
- State:
- Created 4 years ago
- Reactions:276
- Comments:23 (8 by maintainers)
Top Results From Across the Web
Number Input | Duet Design System
Property Attribute Type
accessibleActiveDescendant accessible‑active‑descendant string
accessibleAdd accessible‑add string
accessibleAddDefaults accessible‑add‑default DuetLangObject | string
Read more >Number input – Carbon Design System
Number inputs are similar to text inputs, but contain controls used to increase or decrease an incremental value.
Read more >Number Input - Chakra UI
The NumberInput component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.
Read more >React number input examples
You can use className for adding CSS classes. This component was designed play well with Bootstrap and here is an example with .form-control...
Read more >react-numeric-input - npm
Number input component that can replace the native number input which is not yet very well supported and where it is, it does...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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.
any update on this component?