Input Number

Input numerical values with a customizable range.

Basic usage

TIP

When inputting invalid string to the input box, input value will emit NaN to the upper layer as result of error

Disabled

Steps

Allows you to define incremental steps.

Step strictly

Precision

TIP

The value of precision must be a non negative integer and should not be less than the decimal places of step.

Size

Use attribute size to set additional sizes with large or small.

Controls Position

Attributes

NameDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuenumber / undefined
minthe minimum allowed valuenumber-Infinity
maxthe maximum allowed valuenumberInfinity
stepincremental stepnumber1
step-strictlywhether input value can only be multiple of stepbooleanfalse
precisionprecision of input valuenumber
sizesize of the componentstringlarge / default / smalldefault
readonlysame as readonly in native inputbooleanfalse
disabledwhether the component is disabledbooleanfalse
controlswhether to enable the control buttonsbooleantrue
controls-positionposition of the control buttonsstringright-
namesame as name in native inputstring
labellabel textstring
placeholderplaceholder in inputstring--
value-on-clear (> 2.2.0)value should be set when input box is clearedstring / number / nullmin / max-
validate-eventwhether to trigger form validationboolean-true

Events

NameDescriptionParameters
changetriggers when the value changes(currentValue: number | NaN, oldValue: number | NaN)
blurtriggers when Input blurs(event: FocusEvent)
focustriggers when Input focuses(event: FocusEvent)

Methods

MethodDescriptionParameters
focusget focus the input component-
blurremove focus the input component

Source

ComponentDocs

Contributors