ui icon indicating copy to clipboard operation
ui copied to clipboard

[feat]: input number

Open zhouzi opened this issue 7 months ago • 1 comments

Feature description

The browser's input[type=number] is quite bad in terms of user experience.

And implementing a proper one is not trivial.

It would be ideal for shadcn/ui to provide one.

Affected component/components

Input, Form

Additional Context

Radix doesn't have a number field yet, it's being tracked in this issue:

  • https://github.com/radix-ui/primitives/issues/2213

Other popular libraries do have it, for example:

  • https://mui.com/base-ui/react-number-input/
  • https://react-spectrum.adobe.com/react-spectrum/NumberField.html
  • https://mantine.dev/core/number-input/

React Aria's NumberField page is a great summary of all the intricacies and references the W3C's specs:

  • https://react-spectrum.adobe.com/react-aria/NumberField.html

I found a few standalone libraries, the most popular that's been updated recently is:

  • https://github.com/react-component/input-number

Other solutions are:

  • https://github.com/swiftcarrot/react-input-number
  • https://github.com/yairEO/react-number-input

And here are a few issues referencing the number input's behavior with shadcn/ui:

  • https://github.com/shadcn-ui/ui/issues/3981

Before submitting

  • [X] I've made research efforts and searched the documentation
  • [X] I've searched for existing issues and PRs

zhouzi avatar Jul 23 '24 06:07 zhouzi