rc-input-number

esm Styles
React input-number component
Version 9.5.0 License MIT
Keywords
reactreact-componentreact-input-numberinput-number
INSTALL
Type:
Version:
- Static
- Latest Patch
- Latest Minor
- Latest Major
- 9.5.0
- 9.4.0
- 9.3.0
- 9.2.0
- 9.1.0
- 9.0.0
- 8.6.1
- 8.6.0
- 8.5.0
- 8.4.0
- 8.3.0
- 8.2.0
- 8.1.0
- 8.0.4
- 8.0.3
- 8.0.2
- 8.0.1
- 8.0.0
- 7.4.2
- 7.4.1
- 7.4.0
- 7.3.11
- 7.3.9
- 7.3.8
- 7.3.7
- 7.3.6
- 7.3.5
- 7.3.4
- 7.3.3
- 7.3.2
- 7.3.1
- 7.3.0
- 7.2.0
- 7.1.4
- 7.1.3
- 7.1.2
- 7.1.1
- 7.1.0
- 7.0.6
- 7.0.5
- 7.0.4
- 7.0.3
- 7.0.2
- 7.0.1
- 7.0.0
- 6.2.0
- 6.1.3
- 6.1.2
- 6.1.1
- 6.1.0
- 6.0.1
- 6.0.0
- 5.1.1
- 5.1.0
- 5.0.1
- 5.0.0
- 4.6.3
- 4.6.2
- 4.6.1
- 4.6.0
- 4.5.9
- 4.5.8
- 4.5.7
- 4.5.6
- 4.5.5
- 4.5.4
- 4.5.3
- 4.5.2
- 4.5.1
- 4.5.0
- 4.4.5
- 4.4.4
- 4.4.3
- 4.4.2
- 4.4.1
- 4.4.0
- 4.3.9
- 4.3.8
- 4.3.7
- 4.3.6
- 4.3.5
- 4.3.4
- 4.3.3
- 4.3.2
- 4.3.1
- 4.3.0
- 4.2.0
- 4.1.0
- 4.0.13
- 4.0.12
- 4.0.11
- 4.0.10
- 4.0.9
- 4.0.8
- 4.0.7
- 4.0.6
- 4.0.5
- 4.0.4
- 4.0.3
- 4.0.2
- 4.0.1
- 4.0.0
- 3.7.0
- 3.6.10
- 3.6.9
- 3.6.8
- 3.6.7
- 3.6.6
- 3.6.5
- 3.6.4
- 3.6.3
- 3.6.2
- 3.6.1
- 3.6.0
- 3.5.0
- 3.4.15
- 3.4.14
- 3.4.13
- 3.4.12
- 3.4.11
- 3.4.10
- 3.4.9
- 3.4.8
- 3.4.7
- 3.4.6
- 3.4.5
- 3.4.4
- 3.4.3
- 3.4.2
- 3.4.1
- 3.4.0
- 3.3.5
- 3.3.4
- 3.3.3
- 3.3.2
- 3.3.1
- 3.3.0
- 3.2.1
- 3.2.0
- 3.1.3
- 3.1.2
- 3.1.1
- 3.1.0
- 3.0.4
- 3.0.3
- 3.0.2
- 3.0.1
- 3.0.0
- 2.8.9
- 2.8.8
- 2.8.7
- 2.8.6
- 2.8.5
- 2.8.4
- 2.8.3
- 2.8.2
- 2.8.1
- 2.8.0
- 2.7.8
- 2.7.7
- 2.7.6
- 2.7.5
- 2.7.4
- 2.7.3
- 2.7.2
- 2.7.1
- 2.7.0
- 2.6.3
- 2.6.2
- 2.6.1
- 2.6.0
- 2.5.15
- 2.5.14
- 2.5.13
- 2.5.12
- 2.5.11
- 2.5.10
- 2.5.9
- 2.5.8
- 2.5.7
- 2.5.6
- 2.5.5
- 2.5.4
- 2.5.3
- 2.5.2
- 2.5.1
- 2.5.0
- 2.4.7
- 2.4.6
- 2.4.5
- 2.4.4
- 2.4.3
- 2.4.2
- 2.4.1
- 2.4.0
- 2.3.0
- 2.2.0
- 2.1.2
- 2.1.1
- 2.1.0
- 2.0.4
- 2.0.3
- 2.0.2
- 2.0.1
- 2.0.0
- 1.0.2
- 1.0.1
- 1.0.0
- 8.0.0-alpha.1
- 8.0.0-alpha.0
- 7.0.0-alpha.4
- 7.0.0-alpha.3
- 7.0.0-alpha.2
- 7.0.0-alpha.1
- 7.0.0-alpha.0
- 4.5.8-beta.2
- 4.5.8-beta.1
- 4.5.8-beta.0
- 4.0.0-alpha.1
- 4.0.0-alpha.0
<script type="module"> import rcInputNumber from 'https://cdn.jsdelivr.net/npm/rc-input-number@9.5.0/+esm' </script>
rc-input-number
Input number control.
Screenshots

Install
Usage
import InputNumber from 'rc-input-number';
export default () => <InputNumber defaultValue={10} />;
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.