InputNumber
Importimport{ InputNumber }from"antd"; |
Sourcecomponents/input-number |
When To Use
When a numeric value needs to be provided.
Examples
Numeric-only input box.
Using pre & post tabs example.
Use stringMode to support high precision decimals support. onChange will return string value instead. You need polyfill of BigInt if browser not support.
Control keyboard behavior by keyboard.
Variants of InputNumber.
Add a prefix or suffix inside input.
Focus with additional option.
There are three sizes available to a numeric input box. By default, the size is 32px. The two additional sizes are large and small which means 40px and 24px, respectively.
Click the button to toggle between available and disabled states.
Display value within it's situation with formatter, and we usually use parser at the same time.
Here is a Intl.NumberFormat InputNumber implementation: https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo
Control with mouse wheel.
Show warning style when value is out of range by control.
Add status to InputNumber with status, which could be error or warning.
API
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | |
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | |
| autoFocus | If get focus when component mounted | boolean | false | - |
| changeOnBlur | Trigger onChange when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 |
| changeOnWheel | Allow control with mouse wheel | boolean | - | 5.14.0 |
| controls | Whether to show +- controls, or set custom arrows icon | boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
| decimalSeparator | Decimal separator | string | - | - |
| placeholder | placeholder | 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, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
| 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. Will use formatter when config of formatter | number | - | - |
| readOnly | If readonly the input | boolean | false | - |
| status | Set validation status | 'error' | 'warning' | - | 4.19.0 |
| prefix | The prefix icon for the Input | ReactNode | - | 4.17.0 |
| suffix | The suffix icon for the Input | ReactNode | - | 5.20.0 |
| 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 | - | - |
| variant | Variants of Input | outlined | borderless | filled | outlined | 5.13.0 |
| 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 |
Ref
| Name | Description | Type | Version |
|---|---|---|---|
| blur() | Remove focus | - | |
| focus() | Get focus | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | cursor - 5.22.0 |
| nativeElement | The native DOM element | - | 5.17.3 |
Design Token
Component TokenHow to use?
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| activeBg | Background color when the input box is activated | string | #ffffff |
| activeBorderColor | Active border color | string | #1677ff |
| activeShadow | Box-shadow when active | string | 0 0 0 2px rgba(5,145,255,0.1) |
| addonBg | Background color of addon | string | rgba(0,0,0,0.02) |
| controlWidth | Width of input | number | 90 |
| errorActiveShadow | Box-shadow when active in error status | string | 0 0 0 2px rgba(255,38,5,0.06) |
| filledHandleBg | Background color of handle in filled variant | string | #f0f0f0 |
| handleActiveBg | Active background color of handle | string | rgba(0,0,0,0.02) |
| handleBg | Background color of handle | string | #ffffff |
| handleBorderColor | Border color of handle | string | #d9d9d9 |
| handleFontSize | Icon size of control button | number | 7 |
| handleHoverColor | Hover color of handle | string | #1677ff |
| handleVisible | Handle visible | true | "auto" | auto |
| handleWidth | Width of control button | number | 22 |
| hoverBg | Background color when the input box hovers | string | #ffffff |
| hoverBorderColor | Hover border color | string | #4096ff |
| inputFontSize | Font size | number | 14 |
| inputFontSizeLG | Font size of large | number | 16 |
| inputFontSizeSM | Font size of small | number | 14 |
| paddingBlock | Vertical padding of input | number | 4 |
| paddingBlockLG | Vertical padding of large input | number | 7 |
| paddingBlockSM | Vertical padding of small input | number | 0 |
| paddingInline | Horizontal padding of input | number | 11 |
| paddingInlineLG | Horizontal padding of large input | number | 11 |
| paddingInlineSM | Horizontal padding of small input | number | 7 |
| warningActiveShadow | Box-shadow when active in warning status | string | 0 0 0 2px rgba(255,215,5,0.1) |
Global TokenHow to use?
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.
Why onBlur or other event can not get correct value?
InputNumber's value is wrapped by internal logic. The event.target.value you get from onBlur or other event is the DOM element's value instead of the actual value of InputNumber. For example, if you change the display format through formatter or decimalSeparator, you will get the formatted string in the DOM. You should always get the current value through onChange.
Why changeOnWheel unable to control whether the mouse scroll wheel changes value?
The use of the
typeattribute is deprecated
The InputNumber component allows you to use all the attributes of the input element and ultimately pass them to the input element, This attribute will also be added to the input element when you pass in type='number', which will cause the input element to trigger native properties (allowing the mouse wheel to change the value), As a result changeOnWheel cannot control whether the mouse wheel changes the value.