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
Custom Icon 2.6.3
With prefix and suffix 2.8.4
TIP
For precision purposes, the input number is limited from Number.MIN_SAFE_INTEGER to Number.MAX_SAFE_INTEGER.
API
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | binding value | number / null | — |
| min | the minimum allowed value | number | Number.MIN_SAFE_INTEGER |
| max | the maximum allowed value | number | Number.MAX_SAFE_INTEGER |
| step | incremental step | number | 1 |
| step-strictly | whether input value can only be multiple of step | boolean | false |
| precision | precision of input value | number | — |
| size | size of the component | enum | default |
| readonly 2.2.16 | same as readonly in native input | boolean | false |
| disabled | whether the component is disabled | boolean | false |
| controls | whether to enable the control buttons | boolean | true |
| controls-position | position of the control buttons | enum | — |
| name | same as name in native input | string | — |
| aria-label a11y 2.7.2 | same as aria-label in native input | string | — |
| placeholder | same as placeholder in native input | string | — |
| id | same as id in native input | string | — |
| value-on-clear 2.2.0 | value should be set when input box is cleared | number / null / enum | — |
| validate-event | whether to trigger form validation | boolean | true |
| label a11y deprecated | same as aria-label in native input | string | — |
| inputmode 2.10.3 | same as inputmode in native input | string | — |
| align 2.10.5 | alignment for the inner input text | enum | 'center' |
| disabled-scientific 2.10.5 | disables input of scientific notation (e.g. 'e') | boolean | false |
Slots
| Name | Description |
|---|---|
| decrease-icon 2.6.3 | custom input box button decrease icon |
| increase-icon 2.6.3 | custom input box button increase icon |
| prefix 2.8.4 | content as Input prefix |
| suffix 2.8.4 | content as Input suffix |
Events
| Name | Description | Type |
|---|---|---|
| change | triggers when the value changes | Function |
| blur | triggers when Input blurs | Function |
| focus | triggers when Input focuses | Function |
Exposes
| Name | Description | Type |
|---|---|---|
| focus | get focus the input component | Function |
| blur | remove focus the input component | Function |
Source
Contributors
