[material-ui] Finally add number input component

[TiagoPortfolio]

The problem in depth

Can we finally consider adding a NumberField component to MUI?
This type of input is essential in most applications and it is about time this component is properly supported and available in @mui/material package.

According to the docs here, your recommendation is to use the NumberInput component from BaseUI but, in my opinion, it doesn't make much sense installing a package to use a single component. Another point is, NumberInput from base has a different look and feel compared to the material package components. If in a form we use fields from material mixed with the NumberInput from base, it will look weird.

I think what many developers are doing at the moment is to just use the type="number" prop and build the logic to parse the value to number on the onChange handler. But it seems this should be something that @mui/material package should offer out-of-the-box.

Issue #19154 related to this has been open for almost 5 years but no progress has been made to make this available so I am opening this issue in hope we can move this forward.
Maybe this number input field can be added with a behavior inspired by the NumberInput from BaseUI.

Thanks in advance!

Your environment

Browser used: Chrome 130.0.6723.91

`npx @mui/envinfo`

  System:
    OS: macOS 15.0.1
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    pnpm: 9.12.2 - ~/.nvm/versions/node/v20.4.0/bin/pnpm
  Browsers:
    Chrome: 130.0.6723.91
    Edge: 130.0.2849.56
    Safari: 18.0.1
  npmPackages:
    @emotion/react: 11.11.4 => 11.11.4
    @emotion/styled: 11.11.5 => 11.11.5
    @mui/icons-material: 6.1.3 => 6.1.3
    @mui/lab: 6.0.0-beta.11 => 6.0.0-beta.11
    @mui/material: 6.1.3 => 6.1.3
    @mui/system: 6.1.3 => 6.1.3
    @mui/types: 7.2.18 => 7.2.18
    @mui/x-data-grid: 7.19.0 => 7.19.0
    @mui/x-data-grid-generator: 7.19.0 => 7.19.0
    @mui/x-data-grid-premium: 7.19.0 => 7.19.0
    @mui/x-data-grid-pro: 7.19.0 => 7.19.0
    @mui/x-date-pickers: 7.19.0 => 7.19.0
    @mui/x-date-pickers-pro: 7.19.0 => 7.19.0
    @mui/x-license: 7.18.0 => 7.18.0
    @mui/x-tree-view: 6.17.0 => 6.17.0
    @types/react: 18.3.2 => 18.3.2
    react: 18.3.1 => 18.3.1
    react-dom: 18.3.1 => 18.3.1
    styled-components: 5.3.5 => 5.3.5
    typescript: 5.6.3 => 5.6.3

Search keywords: type number input field
Order ID: 101169

Search keywords:

[siriwatknp]

Thanks for the feedback. We are waiting for Base UI to implement this and we will add it to Material UI.
Meanwhile, please take a look at https://mui-treasury.com/?path=/story/field-number-input--default.

It's a quick solution that you can copy and paste to your project.