mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-16 01:41:02 +08:00
bec5a08368
* add input-number demo * update snapshot * update demo * docs: Update desc * update doc * clean up React useLayoutEffect warning * fix ts definition * re-trigger * update rc-uitl version * bump rc-input-number * update * update * fix ts * update demo snapshot * update doc * update demo
3.3 KiB
3.3 KiB
| category | type | title | cover |
|---|---|---|---|
| Components | Data Entry | InputNumber | https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg |
Enter a number within certain range with the mouse or keyboard.
When To Use
When a numeric value needs to be provided.
API
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| autoFocus | If get focus when component mounted | boolean | false | - |
| bordered | Whether has border style | boolean | true | 4.12.0 |
| decimalSeparator | Decimal separator | string | - | - |
| defaultValue | The initial value | number | - | - |
| disabled | If disable the input | boolean | false | - |
| formatter | Specifies the format of the value presented | function(value: number | string): string | - | - |
| keyboard | If enable keyboard behavior | boolean | true | 4.12.0 |
| max | The max value | number | Number.MAX_SAFE_INTEGER | - |
| min | The min value | number | Number.MIN_SAFE_INTEGER | - |
| parser | Specifies the value extracted from formatter | function(string): number | - | - |
| precision | The precision of input value | number | - | - |
| readOnly | If readonly the input | boolean | false | - |
| size | The height of input box | large | middle | small |
- | - |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal | number | string | 1 | - |
| stringMode | Set value as string to support high precision decimals. Will return string value by onChange |
boolean | false | 4.13.0 |
| value | The current value | number | - | - |
| onChange | The callback triggered when the value is changed | function(value: number | string | null) | - | - |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
| onStep | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' | 'down' }) => void | - | 4.7.0 |
Methods
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
Notes
Per issues #21158, #17344, #9421, and documentation about inputs, it appears this community does not support native inclusion of the type="number" in the <Input /> attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.
FAQ
Why value can exceed min or max in control?
Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.
Why dynamic change min or max which makes value out of range will not trigger onChange?
onChange is user trigger event. Auto trigger will makes form lib can not detect data modify source.