Enter a number within certain range with the mouse or keyboard.
Examples
Basic
Basic
Limit the number range
Limit the number range
Formatting number display
Formatting number display
High Precision Mode
Turning on high-precision mode can correctly calculate numbers that exceed the floating-point range. In this case, value will be represented as a string.
Scroll wheel
Use the mouse wheel to change number
Read-only and disabled
Read-only and disabled
Properties
| Property | Description | Type | Default | Require |
|---|---|---|---|---|
| prefix | prefix | React.ReactNode | - | false |
| suffix | suffix | React.ReactNode | - | false |
| addonBefore | node addon before | React.ReactNode | - | false |
| addonAfter | node addon after | React.ReactNode | - | false |
| highPrecisionMode | High precision mode. Turn on this mode to display numbers that exceed the floating point range. In this case, value will be displayed as a string. | boolean | - | false |
| onChange | value change event | function | - | false |
| value | value | number | string | null | - | false |
| defaultValue | default value | number | string | null | - | false |
| disabled | disabled mode | boolean | - | false |
| readOnly | readOnly mode | boolean | - | false |
| size | size | 'middle' | 'large' | 'small' | 'middle' | false |
| min | The minimum number allowed | number | string | - | false |
| max | 允许填写的最大数字 | number | string | - | false |
| step | The maximum number allowed | number | 1 | false |
| precision | Number of decimal places to retain | number | - | false |
| formatter | Format the number display format. After it is turned on, precision becomes invalid | (value: number | string) => string | - | false |
| parser | Convert the string generated by formatter to a number, and use it with formatter | (value: string) => number | string | null | - | false |
| keyboard | Whether to allow the keyboard up and down keys to change numbers | boolean | true | false |
| wheel | Whether to allow the mouse wheel to change numbers | boolean | - | false |
| controls | Whether to display the button for adjusting the number, which can also be customized | boolean | { upIcon?: ReactNode; downIcon?: ReactNode } | true | false |