siriwatknp
commented
1 week ago 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.
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 theonChangehandler. 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: