[number field] Support decimal values

[mj12albert]

1. This feature request was raised in https://github.com/mui/material-ui/pull/36119#issuecomment-1678269343. It requires https://github.com/mui/material-ui/issues/38514 to be implemented first.

2. The handling of the step that is not an integer is broken. e.g. open https://mui.com/base-ui/react-number-input/#component

https://github.com/mui/material-ui/assets/3165635/bb9614a9-01cd-4738-9a40-86badb9ec2a7

Benchmarks

• https://ant.design/components/input-number#input-number-demo-digit
• https://siriwatknp.github.io/mui-treasury/?path=/story/component-numberinput--precision
• https://chakra-ui.com/docs/components/number-input#adjusting-the-precision-of-the-value
• https://mantine.dev/core/number-input/#fixed-decimal-scale
• https://react-spectrum.adobe.com/react-spectrum/NumberField.html#decimals

[AarCon]

One way that I found to make this work is implementing the Math.round() in the value prop like this:

<NumberInput
  aria-label="Demo number input"
  placeholder="Type a number…"
  value={Math.round(value * 10) / 10}
  step={0.1}
  onChange={(event, val) => setValue(val)}
/>

It's not the most elegant solution as it adds processing time after the fact but it's one way of forcing it to be a decimal with the correct formatting.

[colmtuite]

Hey @AarCon, we've shipped a new alpha NumberField component which supports decimal values, alongside a few other cool features. Check it out and let us know what you think! https://base-ui.netlify.app/base-ui/react-number-field/

[michaldudak]

Closing the issue as we support decimal values in the new NumberField.

[user2745]

hey @michaldudak , can you share the release this was published in? I'm looking to add number input to my platform.

[michaldudak]

We released the NumberField in @base_ui/[email protected]. Note that it's an alpha release and we still may introduce breaking changes.