https://github.com/react-component/input-number
React Input Number
https://github.com/react-component/input-number
ant-design antd antd-mobile javascript react react-native
Last synced: 5 months ago
JSON representation
React Input Number
- Host: GitHub
- URL: https://github.com/react-component/input-number
- Owner: react-component
- License: mit
- Created: 2015-04-14T04:01:00.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2025-04-29T13:40:00.000Z (5 months ago)
- Last Synced: 2025-05-07T20:38:37.599Z (5 months ago)
- Topics: ant-design, antd, antd-mobile, javascript, react, react-native
- Language: TypeScript
- Homepage: https://input-number.vercel.app/
- Size: 9.48 MB
- Stars: 324
- Watchers: 29
- Forks: 177
- Open Issues: 84
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# rc-input-number
Input number control.
[![NPM version][npm-image]][npm-url]
[![npm download][download-image]][download-url]
[![build status][github-actions-image]][github-actions-url]
[![Codecov][codecov-image]][codecov-url]
[![bundle size][bundlephobia-image]][bundlephobia-url]
[![dumi][dumi-image]][dumi-url]
[npm-image]: http://img.shields.io/npm/v/rc-input-number.svg?style=flat-square
[npm-url]: http://npmjs.org/package/rc-input-number
[travis-image]: https://img.shields.io/travis/react-component/input-number/master?style=flat-square
[travis-url]: https://travis-ci.com/react-component/input-number
[github-actions-image]: https://github.com/react-component/input-number/actions/workflows/react-component-ci.yml/badge.svg
[github-actions-url]: https://github.com/react-component/input-number/actions/workflows/react-component-ci.yml
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/input-number/master.svg?style=flat-square
[codecov-url]: https://app.codecov.io/gh/react-component/input-number
[david-url]: https://david-dm.org/react-component/input-number
[david-image]: https://david-dm.org/react-component/input-number/status.svg?style=flat-square
[david-dev-url]: https://david-dm.org/react-component/input-number?type=dev
[david-dev-image]: https://david-dm.org/react-component/input-number/dev-status.svg?style=flat-square
[download-image]: https://img.shields.io/npm/dm/rc-input-number.svg?style=flat-square
[download-url]: https://npmjs.org/package/rc-input-number
[bundlephobia-url]: https://bundlephobia.com/package/rc-input-number
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-input-number
[dumi-url]: https://github.com/umijs/dumi
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
## Screenshots
## Install
[](https://npmjs.org/package/rc-input-number)
## Usage
```js
import InputNumber from 'rc-input-number';
export default () => ;
```
## Development
```
npm install
npm start
```
## Example
http://127.0.0.1:8000/examples/
online example: https://input-number.vercel.app/
## API
### props
name
type
default
description
prefixCls
string
rc-input-number
Specifies the class prefix
min
Number
Specifies the minimum value
onClick
placeholder
string
max
Number
Specifies the maximum value
step
Number or String
1
Specifies the legal number intervals
precision
Number
Specifies the precision length of value
disabled
Boolean
false
Specifies that an InputNumber should be disabled
required
Boolean
false
Specifies that an InputNumber is required
autoFocus
Boolean
false
Specifies that an InputNumber should automatically get focus when the page loads
readOnly
Boolean
false
Specifies that an InputNumber is read only
controls
Boolean
true
Whether to enable the control buttons
name
String
Specifies the name of an InputNumber
id
String
Specifies the id of an InputNumber
value
Number
Specifies the value of an InputNumber
defaultValue
Number
Specifies the defaultValue of an InputNumber
onChange
Function
Called when value of an InputNumber changed
onBlur
Function
Called when user leaves an input field
onPressEnter
Function
The callback function that is triggered when Enter key is pressed.
onFocus
Function
Called when an element gets focus
style
Object
root style. such as {width:100}
upHandler
React.Node
custom the up step element
downHandler
React.Node
custom the down step element
formatter
(value: number|string): displayValue: string
Specifies the format of the value presented
parser
(displayValue: string) => value: number
`input => input.replace(/[^\w\.-]*/g, '')`
Specifies the value extracted from formatter
pattern
string
Specifies a regex pattern to be added to the input number element - useful for forcing iOS to open the number pad instead of the normal keyboard (supply a regex of "\d*" to do this) or form validation
decimalSeparator
string
Specifies the decimal separator
inputMode
string
Specifies the inputmode of input
wheel
Boolean
true
Allows changing value with mouse wheel
## Keyboard Navigation
* When you hit the ⬆ or ⬇ key, the input value will be increased or decreased by `step`
* With the Shift key (Shift+⬆, Shift+⬇), the input value will be changed by `10 * step`
* With the Ctrl or ⌘ key (Ctrl+⬆ or ⌘+⬆ or Ctrl+⬇ or ⌘+⬇ ), the input value will be changed by `0.1 * step`
## Mouse Wheel
* When you scroll up or down, the input value will be increased or decreased by `step`
* Scrolling with the Shift key, the input value will be changed by `10 * step`
## Test Case
```
npm test
npm run chrome-test
```
## Coverage
```
npm run coverage
```
open coverage/ dir
## License
rc-input-number is released under the MIT license.