[material-ui] 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).

• [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" 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

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

[GaddMaster]

Hey Why when I copy and paste exactly this from the TextField doc it does not work ? <TextField inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }} /> Daniel

[sscotth]

<TextField inputProps={{ inputMode: 'numeric'}} />

works on latest mobile safari or

<TextField inputProps={{ inputMode: 'decimal' }} /> if need a decimal.

pattern adds some basic client-side-validation

https://codesandbox.io/s/white-fire-9szpr

If you need a negative number keyboard, I think you are out of luck on ios.

https://funwithforms.com/posts/inputmode/

[GaddMaster]

@sscotth Your code sandbox also does not work Chrome Firefox

[sscotth]

@GaddMaster What doesn't work?

iOS Chrome 96. You can copy and paste non-numeric values into the top inputs, but not the bottom. Correct keyboard on each. Validation works.

macOS Chrome 95. Validation works.

macOS Firefox 94. Validation works.

[gearcoded]

This is a little bit offtopic, but the documentation leads to this page. So, this information might be helpful for someone.

From the examples with the slider, I found the following way to add the Input element with the Number type:

import MuiInput from '@mui/material/Input';

function NumberComponent(props){
  // if you want to use state, uncomment this:
  // let { numberValue } = props || 1;

  // if you want to use state, uncomment this:
  // const [numberValue, handleDurationChange] = useState(numberProperty);


  return (
    <MuiInput
      value={numberValue}
      size="small"
      inputProps={{
        step: 1,
        min: 0,
        max: 99999,
        type: 'number',
      }}
    />
  )
}

[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?

[Benzer1406]

Any update here?

[AndyFang36]

Great, thank you!

[mbrookes]

@siriwatknp Could you link to the source for yours?

[siriwatknp]

Demo: https://next.mui-treasury.com/?path=/story/component-numberinput--default Component src: https://github.com/siriwatknp/mui-treasury/blob/next/packages/component-numberinput/src/NumberInput.tsx useNumberInput hook: https://github.com/siriwatknp/mui-treasury/blob/next/packages/use-number-input/src/useNumberInput.ts

[mbrookes]

Ah, that's why I couldn't find it :)

Thanks!

[TheRealCuran]

Just to make sure: please don't overlook a step parameter in the implementation. And please make it possible to define a set of valid fractions (static and by callback). I have number fields implemented in a tool we use internally, where only a defined set of fractions are OK. Say you press the "up" button and you would only want to got from x.33 to x.5, then there should be some kind of option to define those valid steps.

In case it helps, my Order ID is: :credit_card: 47016

[mbrookes]

Not sure why Sam is asking for interviews to ask what components users would like in v6 when we already have a concrete list based on issue upvotes; and even better, an existing implementation of the most popular request. Nor does it need to wait for v6 - an addition isn't a breaking change. Lab/refine/publish...

[afilp]

If possible, I would "urge" this to happen soon. Why?

Well, I have found myself several times accidentally changing the focused number input while scrolling through the touchpad towards the end of the page to hit the SAVE button. Due to the stepper...

See the result here, this was entered as 24500, I then scrolled down to hit Save and I saved the form, see what happened to the input (I re-entered to the form afterwards):

So, this can be done by many users too and they will not even notice! (I noticed this accidentally too)

Thanks!

[MVR5991]

If possible, I would "urge" this to happen soon. Why?

Well, I have found myself several times accidentally changing the focused number input while scrolling through the touchpad towards the end of the page to hit the SAVE button. Due to the stepper...

We recently had the same bug in our application which took a while to get noticed since it is very subtle. Our workaround for now is something like this:

export const blurTarget = (event: SyntheticEvent) => {
  event.target instanceof HTMLElement && event.target.blur()
}

 <TextField
      size="small"
      type="number"
     onWheel={blurTarget}

My company would also like to see this implemented as soon as possible :)

Thanks

[jayarjo]

Any progress on this?

[mnajdova]

Any progress on this?

We plan to start working on this in this quarter.

[oliviertassinari]

@mj12albert I think that it could be great to spend your first couple of weeks on smaller changes than this issue. There are probably two different NumberInput components to build here. My idea is that with smaller changes, you could maybe learn the codebase, workflows, and build confidence faster.

[thiagorochatr]

Hey guys!

I don't know if it has much to do with the topic of discussion, but I would like to ask a question! If I can't send it here, let me know and I'll remove it! And if possible, point me to the correct place to take this doubt.

In a system I'm building, I ask the user for the value in Brazilian Reais (R$ 00,00 format). This week, I was told that the input is not working on Samsung and OnePlus phones (I suspect it is on any phone with a Chromium-based browser). On my MacBook and Iphone, the input works perfectly.

Can anyone help me, please? Links: https://github.com/thiagorochatr/teste-input-value/blob/main/components/original/InputPriceOG.tsx https://teste-input-value.vercel.app/original

[thiagorochatr]

Hey guys!

I don't know if it has much to do with the topic of discussion, but I would like to ask a question! If I can't send it here, let me know and I'll remove it! And if possible, point me to the correct place to take this doubt.

In a system I'm building, I ask the user for the value in Brazilian Reais (R$ 00,00 format). This week, I was told that the input is not working on Samsung and OnePlus phones (I suspect it is on any phone with a Chromium-based browser). On my MacBook and Iphone, the input works perfectly.

Can anyone help me, please? Links: https://github.com/thiagorochatr/teste-input-value/blob/main/components/original/InputPriceOG.tsx https://teste-input-value.vercel.app/original

Update: fixed!

[JahnoelRondon]

Demo: https://next.mui-treasury.com/?path=/story/component-numberinput--default Component src: https://github.com/siriwatknp/mui-treasury/blob/next/packages/component-numberinput/src/NumberInput.tsx useNumberInput hook: https://github.com/siriwatknp/mui-treasury/blob/next/packages/use-number-input/src/useNumberInput.ts

You can still use + and other math operators

[JahnoelRondon]

Current example solution With Keydown preventing changes based on criteria.

// Solution with keydown
    <TextField
      value={state.value}
      type="number"
      onKeyDown={(e) => {
        if (e.key === "e" || e.key === "E" || e.key === "-" || e.key === "+") {
          e.preventDefault()
        }
      }}
      onChange={(e) => {
        handleChange();
      }}
    />

found this stack over flow helpful https://stackoverflow.com/questions/31706611/why-does-the-html-input-with-type-number-allow-the-letter-e-to-be-entered-in

[mj12albert]

✨ We've released a first iteration on the Number Input for Base UI in v5.14.4! The docs: https://mui.com/base-ui/react-number-input/.

[jo-chemla]

✨ We've released a first iteration on the Number Input for Base UI in v5.14.4!

Great to hear! Will this be ported to Material UI core itself at some point? Thanks!

[mbrookes]

Adding a reminder to update: https://mui.com/material-ui/react-text-field/#type-quot-number-quot when this is released.