Input · InputNumber
InputNumber
Through the mouse or keyboard, input the value in the range. Unlike Input, it has a stepper operation area for digital scenes, and it can display more complex content formats when used with Parser.

When to Use

When you need to get a standard value.

Demos

How to import

Basic Input Box

Inner Buttons

With innerButtons, you can hide the buttons on the right into the interior, which will only be displayed when hover occurs
Set hidebuttons to true to hide the buttons completely

Size

Custom Display Format and Resolution

A pair of methods for formatter and parser, which generally need to be set at the same time, otherwise the value cannot be resolved correctly.

Can Only Enter Numbers

With formatter and onNumberChange(>=v1.9.0), a pure digital input box can be implemented.

API Reference

PropertiesInstructionstypeDefaultVersion
autofocusAutomatic access to focusbooleanfalse
classNameclass name of InputNumberstring-
defaultValueDefaultnumber
disabledDisabled statusbooleanfalse
formatterSpecifies the format of the input box to display the value(value: number|string) => string-
hideButtonsHide the "up/down" button when passing truebooleanfalse1.0.0
innerButtonsShow the "up/down" button in input box when passing truebooleanfalse1.5.0
insetLabelPrefix label, lower priority than prefixstring|ReactNode
keepFocusKeep the input box focused when you click the buttonbooleanfalse1.10.0
maxLimit maximum valuenumberInfinity
minLimit minimum valuenumber-Infinity
parserSpecifies how to convert back number string from formatter and use them in conjunction with formatter(value: string) => string-
precisionNumerical precisionnumber-
prefixClsPrefix contentstring|ReactNode
pressIntervalHow often will the click event be triggered when the button is long pressed, in millisecondsnumber250
pressTimeoutWhen the button is long pressed, how long will the click event be triggered after the delay, in millisecondsnumber250
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
shiftStepStep size for pressing the shift key, it can be a decimal. The default value was adjusted from 1 to 10 in v2.13number101.5.0
showClearDo you show the clear button?booleanfalse0.35.0
sizeEnter box size, optional value: "default"|"small"|"large"string'default'
stepEach time you change the number of steps, it can be a decimal.number1
styleInline style of InputNumberCSSProperties-
suffixCustom suffixReactNode
valueCurrent valuenumber
onBlurCallback when focus is lost(e: domEvent) => void() => {}1.0.0
onChangeChange callback(value: number|string) => void-
onFocusCallback when focus is obtained(e: domEvent) => void() => {}1.0.0
onNumberChangeNumber change callback(value: number) => void-1.9.0

Methods

NameDescription
blur()Move the focus.
focus()Get the focus.

Accessibility

ARIA

  • InputNumber has spinbutton role
  • spinbutton uses aria-valuenow for current value, aria-valuemax for acceptable maximum value, and aria-valuemin for acceptable minimum value
  • When InputNumber is used in Form, the value of the input box's aria-labeledby reference is Field label

Keyboard and Focus

  • InputNumber can get focus, keyboard users can use Tab and Shift + Tab to switch focus (Increase and decrease buttons are not focusable)
  • Keyboard users can press up key ⬆️ or down key ⬇️ and the input value will increase or decrease by step (default is 1)
  • Hold down Shift + Up ⬆️ or Down ⬇️ , the input value will increase or decrease by shiftStep (default is 10)

Design Tokens

© 2021 - 2022 Semi Design. All rights reserved.

京ICP备19058139号-13浙公网安备 33011002016131号

Designed & Developed with love by Douyin FE & MED