# InputNumber

- Page: https://jiguang132.com/resources/arco-design/docs/input-number
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

An input box which only allows to enter number.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Use the mouse or keyboard to enter standard values within the range.
- **Button Mode**: Set `mode` as `button` to use a numeric input box with buttons.
- **Size**: Setting `size` can use four sizes (`mini`, `small`, `default`, `large`) number input box. The corresponding heights are `24px`, `28px`, `32px`, and `36px` respectively.
- **Precision**: Use `precision` to set the number precision. When `precision` is less than the decimal place of `step`, the precision is taken as the number of decimal places of `step`.
- **Format**: The display value of the input box can be defined through the use of `formatter` and `parser` together. Use the `userTyping` parameter in the `formatter` to determine whether the input is in progress. You can delay the display of the value after the `formatter`
- **Prefix and Suffix**: You can add a prefix or a suffix.
- **Strict Mode**: Enable strict mode with `strictMode` to support higher precision, `onChange` will return a string at this time.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### InputNumber

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|disabled|Whether input is disabled|boolean |`-`|-|
|error|Whether input has error status|boolean |`-`|-|
|hideControl|Whether to hide the control buttons|boolean |`-`|-|
|readOnly|Whether input is readonly|boolean |`-`|2.17.0|
|strictMode|`onChange` will return a string in strict mode|boolean |`-`|2.42.0|
|max|The max value|number |`Infinity`|-|
|min|The min value|number |`-Infinity`|-|
|precision|The precision of input value|number |`-`|-|
|step|The value of each step. It can be an integer or decimal|number |`1`|-|
|placeholder|Placeholder of input element|string |`-`|-|
|mode|`embed`: Button embedded, `button`: Buttons on both sides|'embed' \| 'button' |`embed`|-|
|size|Different sizes|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
|prefix|The prefix for the InputNumber|ReactNode |`-`|-|
|suffix|The suffix for the InputNumber|ReactNode |`-`|-|
|className|Additional css class|string \| string[] |`-`|-|
|defaultValue|To set default value|number \| string |`-`|-|
|icons|Customize icons|{up?: ReactNode;down?: ReactNode;plus?: ReactNode;minus?: ReactNode;} |`-`|-|
|style|Additional style|CSSProperties |`-`|-|
|value|To set value|undefined \| number \| string |`-`|-|
|formatter|Specifies the format of the value presented|(value: number \| string, info: { userTyping: boolean; input: string }) => string |`-`|Param `info` in `2.41.0`|
|onBlur|Callback when the input is blurred|(e) => void |`-`|-|
|onChange|Callback when the value changes|(value: number, reason?: [InputNumberValueChangeReason](#inputnumbervaluechangereason)) => void |`-`|`reason` in 2.61.0|
|onFocus|Callback when the input is focused|(e) => void |`-`|-|
|onKeyDown|Callback when the keyboard is pressed|(e: Event) => void |`-`|-|
|parser|Specifies the value extracted from formatter|(value: string) => number \| string |`(input) => input.replace(/[^\w\.-]+/g, '')`|-|

### InputNumberValueChangeReason

```js
// 造成输入框值改变的原因：用户输入、增加、减少、超出范围值修正
export type InputNumberValueChangeReason =
  | "manual"
  | "increase"
  | "decrease"
  | "outOfRange";
```

## Methods

|Name|Description|
|---|:---:|
|blur()|Remove focus|
|focus()|Get focus|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt