@rc-component/input-number
+
Part of the Ant Design ecosystem.
🔢 Accessible React number input with precision, formatting, keyboard, and wheel support.
+ +
+ 
+ 
+ 
+ 
+ 
+ Part of the Ant Design ecosystem.
🔢 Accessible React number input with precision, formatting, keyboard, and wheel support.
+ +
+
+
+
+
+
English | 简体中文
+ +## Highlights + +- Controlled and uncontrolled numeric input modes. +- Decimal precision, custom parser, formatter, and decimal separator support. +- Keyboard stepping, mouse wheel stepping, and custom step handlers. +- Prefix, suffix, spinner controls, and semantic `classNames` / `styles` slots. +- TypeScript generic value typing for number and string based value flows. ## Install -[](https://npmjs.org/package/@rc-component/input-number) +```bash +npm install @rc-component/input-number +``` ## Usage -```js +```tsx | pure import InputNumber from '@rc-component/input-number'; -export default () =>| 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 | -
Ant Design 生态的一部分。
🔢 React 数字输入组件，支持格式化、精度、步进和键盘交互。
+ +
+
+
+
+
+
English | 简体中文
+ +## 特性 + +- 受控和非受控数字输入模式。 +- 小数精度、自定义解析器、格式化程序和小数分隔符支持。 +- 支持键盘步进、鼠标滚轮步进和自定义步进处理。 +- 支持前缀、后缀、步进控制器和语义化 `classNames` / `styles` 插槽。 +- TypeScript 通用值类型用于基于数字和字符串的值流。 + +## 安装 + +```bash +npm install @rc-component/input-number +``` + +## 使用 + +```tsx | pure +import InputNumber from '@rc-component/input-number'; + +export default () =>