mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.94k stars 32.27k forks source link

[material-ui] Finally add number input component #44284

Open TiagoPortfolio opened 2 weeks ago

TiagoPortfolio commented 2 weeks ago

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 commented 2 days 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.