# InputNumber

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

Enter a number within certain range with the mouse or keyboard.


## When To Use

When a numeric value needs to be provided.

## Examples


- Basic · `basic`
- Sizes · `size`

- Disabled · `disabled`
- High precision decimals · `digit`
- Formatter · `formatter`
- Keyboard · `keyboard`
- Wheel · `change-on-wheel`
- Variants · `variant`
- Spinner · `spinner`



- Out of range · `out-of-range`
- Prefix / Suffix · `presuffix`
- Status · `status`
- Focus · `focus`
- Custom semantic dom styling · `style-class`




## API

Common props ref：[Common props](#jguang-common-props)

| Property | Description | Type | Default | Version | [Global Config](/components/config-provider#component-config) |
| --- | --- | --- | --- | --- | --- |
| ~~addonAfter~~ | The label text displayed after (on the right side of) the input field, please use Space.Compact instead | ReactNode | - | 4.17.0 | × |
| ~~addonBefore~~ | The label text displayed before (on the left side of) the input field, please use Space.Compact instead | ReactNode | - | 4.17.0 | × |
| changeOnBlur | Trigger `onChange` when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 | × |
| changeOnWheel | Allows control with mouse wheel | boolean | - | 5.14.0 | × |
| classNames | Customize class for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), string> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), string> | - | 6.0.0 | 6.0.0 |
| controls | Whether to show `+-` controls, or set custom arrow icons | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - |  | × |
| decimalSeparator | Decimal separator | string | - | - | × |
| placeholder | Placeholder | string | - |  | × |
| defaultValue | The initial value | number | - | - | × |
| disabled | If the input is disabled | boolean | false | - | × |
| formatter | Specifies the format of the value presented | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - |  | × |
| keyboard | If keyboard behavior is enabled | boolean | true |  | × |
| max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - | × |
| min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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 the input is readonly | boolean | false | - | × |
| status | Set validation status | 'error' \| 'warning' | - |  | × |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function. | Record<[SemanticDOM](#semantic-dom), CSSProperties> \| (info: { props })=> Record<[SemanticDOM](#semantic-dom), CSSProperties> | - | 6.0.0 | 6.0.0 |
| prefix | The prefix icon for the Input | ReactNode | - |  | × |
| suffix | The suffix icon for the Input | ReactNode | - | 5.20.0 | × |
| size | The height of input box | `large` \| `medium` \| `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 | × |
| mode | Show input or spinner | `'input' \| 'spinner'` | `'input'` |  | × |
| value | The current value of the component | number | - | - | × |
| variant | Variants of Input | `outlined` \| `borderless` \| `filled` \| `underlined` | `outlined` | 5.13.0 \| `underlined`: 5.24.0 | 5.19.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 / Keyboard / Wheel | (value: number, info: { offset: number, type: 'up' \| 'down', emitter: 'handler' \| 'keydown' \| 'wheel' }) => void | - | - | × |
| ~~bordered~~ | Whether has border style, please use `variant` instead | boolean | true | - | × |

## 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 |

## Semantic DOM

| Semantic node | Native description | Version |
| --- | --- | --- |
| `root` | Root element, sets inline-block layout, width, border radius and reset styles | — |
| `prefix` | Prefix wrapper element, sets flex layout, alignment and right margin styles | — |
| `input` | Input element, sets font, line height, text input and interaction styles | — |
| `suffix` | Suffix wrapper element, sets flex layout, margin and transition animation styles | — |
| `actions` | Actions element, sets absolute positioning, width, flex layout and number adjustment button styles | — |
| `action` | Single action button element, sets button styling, hover effects and click interactions | — |

Semantic description source: `vendor/components/input-number/demo/_semantic.tsx`

## Design Token

Types, inheritance and declarations retain the pinned native source. Defaults are computed by the native theme and may be overridden by ConfigProvider; this table does not invent static defaults.

| Token | Type | Native description |
| --- | --- | --- |
| `controlWidth` | `number` | Width of input |
| `handleWidth` | `number` | Width of control button |
| `handleFontSize` | `number` | Icon size of control button |
| `handleVisible` | `'auto' \| true` | Handle visible |
| `handleBg` | `string` | Background color of handle |
| `handleActiveBg` | `string` | Active background color of handle |
| `handleHoverColor` | `string` | Hover color of handle |
| `handleBorderColor` | `string` | Border color of handle |
| `filledHandleBg` | `string` | Background color of handle in filled variant |
| `handleOpacity` | `number` | See native declaration and inherited types |
| `handleVisibleWidth` | `number` | See native declaration and inherited types |

Declaration source: `vendor/components/input-number/style/token.ts`

```ts
import { FastColor } from '@ant-design/fast-color';

import type { SharedComponentToken, SharedInputToken } from '../../input/style/token';

import { initComponentToken } from '../../input/style/token';

import type { FullToken, GetDefaultToken } from '../../theme/internal';

export interface ComponentToken extends SharedComponentToken {
  /**
   * @desc 输入框宽度
   * @descEN Width of input
   */
  controlWidth: number;
  /**
   * @desc 操作按钮宽度
   * @descEN Width of control button
   */
  handleWidth: number;
  /**
   * @desc 操作按钮图标大小
   * @descEN Icon size of control button
   */
  handleFontSize: number;
  /**
   * Default `auto`. Set `true` will always show the handle
   * @desc 操作按钮可见性
   * @descEN Handle visible
   */
  handleVisible: 'auto' | true;
  /**
   * @desc 操作按钮背景色
   * @descEN Background color of handle
   */
  handleBg: string;
  /**
   * @desc 操作按钮激活背景色
   * @descEN Active background color of handle
   */
  handleActiveBg: string;
  /**
   * @desc 操作按钮悬浮颜色
   * @descEN Hover color of handle
   */
  handleHoverColor: string;
  /**
   * @desc 操作按钮边框颜色
   * @descEN Border color of handle
   */
  handleBorderColor: string;
  /**
   * @desc 面性变体操作按钮背景色
   * @descEN Background color of handle in filled variant
   */
  filledHandleBg: string;
  /**
   * @internal
   */
  handleOpacity: number;
  /**
   * @internal
   */
  handleVisibleWidth: number;
}

export type InputNumberToken = FullToken<'InputNumber'> & SharedInputToken;
```

## Notes

Per issues [#21158](https://github.com/ant-design/ant-design/issues/21158), [#17344](https://github.com/ant-design/ant-design/issues/17344), [#9421](https://github.com/ant-design/ant-design/issues/9421), and [documentation about inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_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? {#faq-controlled-range}

Developer handle data by their own in control. It will make data out of sync if InputNumber changes 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`? {#faq-dynamic-range-change}

`onChange` is user trigger event. Auto-triggering would prevent form libraries from detecting the data modification source.

### Why `onBlur` or other event can not get correct value? {#faq-onblur-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? {#faq-change-on-wheel}

> The use of the `type` attribute 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 activate native behavior (allowing the mouse wheel to change the value), As a result `changeOnWheel` cannot control whether the mouse wheel changes the value.


## Shared native props {#jguang-common-props}


> Tips: The following generic properties apply to most antd components; those not supported are described separately.

| Property | Description | Type | Default |
| --- | --- | --- | --- |
| style | The additional style | CSSProperties | - |
| className | The additional css class | string | - |
| rootClassName | ClassName on the root element | string | - |
| autoFocus | Auto focus when component mounted, only effective for focusable elements like forms, links, etc. | boolean | false |


## Install and reproduce an example

```bash
npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23
```

Use ConfigProvider and native App; configure dayjs locale separately. Each example lists its complete source files and additional pinned dependencies in View code. Example names select demos, not universal component props. See the resource setup guide for theme, locale and SSR.

## Native type references

The source viewer includes unchanged native implementations and the following source declarations. Inherited types remain in their native packages. English source comments are preserved as code reference.

- `vendor/components/input-number/index.tsx`
- `vendor/components/input-number/style/token.ts`

## Source and license

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

Original bilingual prose and executable examples are retained. Website-only embeds and token tables are expanded locally. Ant Design is MIT; separately listed dependency notices also apply. Upload previews block outbound requests and do not provide a backend.

---

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