[number field] Support decimal values

[mj12albert]

1. This feature request was raised in [base-ui] Create useNumberInput and NumberInput material-ui#36119 (comment). It requires [useNumberInput] Warn when switching between controlled and uncontrolled state material-ui#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

Screen.Recording.2023-10-03.at.01.33.46.mov

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.

[lebadapetru]

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

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

Hey @michaldudak , first of thank you for all the work, the base ui helps a lot in my project and you guys have saved me a lot of work.
I was working on implementing the number field and couldn't find the decimal support for it in the "@mui/base": "^5.0.0-beta.63", is it only available in the @base_ui/[email protected] ?

[michaldudak]

That's right, it's not available in @mui/base.