[New Primitive] NumberInput

[zhouzi]

This request was originally posted in #2213

The idea is to add a number input component that allows a user to enter a number, and increment or decrement the value using stepper buttons.

The native type="number" has many shortcomings highlighted in this article:

• Why the GOV.UK Design System team changed the input type for numbers

Examples from other libraries:

• React Aria: NumberField
• Mantine: NumberInput (based on react-number-format)
• Chakra UI: Number Input (based on @ark-ui/react/number-input)
• Base UI: Number Field
• MUI: NumberInput
• Ark UI: Number Input

[Charlie-XIAO]

+1, and the Vue port of Radix UI has got their own NumberField component as well: https://www.radix-vue.com/components/number-field.html

[zhouzi]

Thanks for sharing! That makes it quite easy for anyone to convert the Vue version to React and submit a PR.

Based on a quick look, the library's API and code seems consistent with the React's version.

[bamorim]

NumberInput was the number one reason I went with Mantine for an MVP I'm doing, specially how it handles decimal numbers.

The prototype I was doing involved setting money values and I wanted to support PT-BR which uses , for decimal separator.

All it was required from me was to set decimalScale={2} and decimalSeparator={','} and it was all good to go.