InputNumber

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

Ref

Semantic DOM

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.

Declaration source: vendor/components/input-number/style/token.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, #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 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?

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?

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

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

Install and reproduce an example

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.