logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

InputNumber

Enter a number within certain range with the mouse or keyboard.
Importimport { InputNumber } from "antd";
Sourcecomponents/input-number
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

When a numeric value needs to be provided.

Examples

API

Common props ref:Common props

PropertyDescriptionTypeDefaultVersion
addonAfterThe label text displayed after (on the right side of) the input fieldReactNode-
addonBeforeThe label text displayed before (on the left side of) the input fieldReactNode-
autoFocusIf get focus when component mountedbooleanfalse-
changeOnBlurTrigger onChange when blur. e.g. reset value in range by blurbooleantrue5.11.0
changeOnWheelAllow control with mouse wheelboolean-5.14.0
controlsWhether to show +- controls, or set custom arrows iconboolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode; }-4.19.0
decimalSeparatorDecimal separatorstring--
placeholderplaceholderstring-
defaultValueThe initial valuenumber--
disabledIf disable the inputbooleanfalse-
formatterSpecifies the format of the value presentedfunction(value: number | string, info: { userTyping: boolean, input: string }): string-info: 4.17.0
keyboardIf enable keyboard behaviorbooleantrue4.12.0
maxThe max valuenumberNumber.MAX_SAFE_INTEGER-
minThe min valuenumberNumber.MIN_SAFE_INTEGER-
parserSpecifies the value extracted from formatterfunction(string): number--
precisionThe precision of input value. Will use formatter when config of formatternumber--
readOnlyIf readonly the inputbooleanfalse-
statusSet validation status'error' | 'warning'-4.19.0
prefixThe prefix icon for the InputReactNode-4.17.0
suffixThe suffix icon for the InputReactNode-5.20.0
sizeThe height of input boxlarge | middle | small--
stepThe number to which the current value is increased or decreased. It can be an integer or decimalnumber | string1-
stringModeSet value as string to support high precision decimals. Will return string value by onChangebooleanfalse4.13.0
valueThe current valuenumber--
variantVariants of Inputoutlined | borderless | filled | underlinedoutlined5.13.0 | underlined: 5.24.0
onChangeThe callback triggered when the value is changedfunction(value: number | string | null)--
onPressEnterThe callback function that is triggered when Enter key is pressedfunction(e)--
onStepThe callback function that is triggered when click up or down buttons(value: number, info: { offset: number, type: 'up' | 'down' }) => void-4.7.0

Ref

NameDescriptionTypeVersion
blur()Remove focus-
focus()Get focus(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' })cursor - 5.22.0
nativeElementThe native DOM element-5.17.3

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
activeBgBackground color when the input box is activatedstring#ffffff
activeBorderColorActive border colorstring#1677ff
activeShadowBox-shadow when activestring0 0 0 2px rgba(5,145,255,0.1)
addonBgBackground color of addonstringrgba(0,0,0,0.02)
controlWidthWidth of inputnumber90
errorActiveShadowBox-shadow when active in error statusstring0 0 0 2px rgba(255,38,5,0.06)
filledHandleBgBackground color of handle in filled variantstring#f0f0f0
handleActiveBgActive background color of handlestringrgba(0,0,0,0.02)
handleBgBackground color of handlestring#ffffff
handleBorderColorBorder color of handlestring#d9d9d9
handleFontSizeIcon size of control buttonnumber7
handleHoverColorHover color of handlestring#1677ff
handleVisibleHandle visibletrue | "auto"auto
handleWidthWidth of control buttonnumber22
hoverBgBackground color when the input box hoversstring#ffffff
hoverBorderColorHover border colorstring#4096ff
inputFontSizeFont sizenumber14
inputFontSizeLGFont size of largenumber16
inputFontSizeSMFont size of smallnumber14
paddingBlockVertical padding of inputnumber4
paddingBlockLGVertical padding of large inputnumber7
paddingBlockSMVertical padding of small inputnumber0
paddingInlineHorizontal padding of inputnumber11
paddingInlineLGHorizontal padding of large inputnumber11
paddingInlineSMHorizontal padding of small inputnumber7
warningActiveShadowBox-shadow when active in warning statusstring0 0 0 2px rgba(255,215,5,0.1)
Global TokenHow to use?

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 change 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 trigger will makes form lib can not detect data modify 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 cause the input element to trigger native properties (allowing the mouse wheel to change the value), As a result changeOnWheel cannot control whether the mouse wheel changes the value.

Basic

Numeric-only input box.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Pre / Post tab

Using pre & post tabs example.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
High precision decimals

Use stringMode to support high precision decimals support. onChange will return string value instead. You need polyfill of BigInt if browser not support.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Keyboard

Control keyboard behavior by keyboard.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Variants

Variants of InputNumber, there are four variants: outlined filled borderless and underlined.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.13.0
Prefix / Suffix

Add a prefix or suffix inside input.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Focus

Focus with additional option.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.22.0
Sizes

There are three sizes available to a numeric input box. By default, the size is 32px. The two additional sizes are large and small which means 40px and 24px, respectively.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Disabled

Click the button to toggle between available and disabled states.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Formatter

Display value within it's situation with formatter, and we usually use parser at the same time.

Here is a Intl.NumberFormat InputNumber implementation: https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Wheel

Control with mouse wheel.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.14.0
Out of range

Show warning style when value is out of range by control.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Status

Add status to InputNumber with status, which could be error or warning.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
+
$
+
$
cascader
+
+
¥
¥


¥


¥


RMB