--- title: Input lang: en-US --- # Input Number Input numerical values with a customizable range. ## Basic usage :::demo Bind a variable to `v-model` in `` element and you are set. input-number/basic ::: :::tip When inputting invalid string to the input box, input value will emit `NaN` to the upper layer as result of error ::: ## Disabled :::demo The `disabled` attribute accepts a `boolean`, and if the value is `true`, the component is disabled. If you just need to control the value within a range, you can add `min` attribute to set the minimum value and `max` to set the maximum value. By default, the minimum value is `0`. input-number/disabled ::: ## Steps Allows you to define incremental steps. :::demo Add `step` attribute to set the step. input-number/steps ::: ## Step strictly :::demo The `step-strictly` attribute accepts a `boolean`. if this attribute is `true`, input value can only be multiple of step. input-number/step-strictly ::: ## Precision :::demo Add `precision` attribute to set the precision of input value. input-number/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`. :::demo input-number/size ::: ## Controls Position :::demo Set `controls-position` to decide the position of control buttons. input-number/controlled ::: ## API ### Attributes | Name | Description | Type | Default | | -------------------------------------------- | ------------------------------------------------ | --------------------------------------------- | --------- | | model-value / v-model | binding value | ^[number] | — | | min | the minimum allowed value | ^[number] | -Infinity | | max | the maximum allowed value | ^[number] | Infinity | | 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]`'large' \| 'default' \| 'small'` | default | | readonly | 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]`'' \| 'right'` | — | | name | same as `name` in native input | ^[string] | — | | label | same as `label` in native input | ^[string] | — | | placeholder | same as `placeholder` in native input | ^[string] | — | | id | same as `id` in native input | ^[string] | — | | value-on-clear | value should be set when input box is cleared | ^[number] / ^[null] / ^[enum]`'min' \| 'max'` | — | | validate-event | whether to trigger form validation | ^[boolean] | true | ### Events | Name | Description | Type | | ------ | ------------------------------- | --------------------------------------------------------------------------------------- | | change | triggers when the value changes | ^[Function]`(currentValue: number \| undefined, oldValue: number \| undefined) => void` | | blur | triggers when Input blurs | ^[Function]`(event: FocusEvent) => void` | | focus | triggers when Input focuses | ^[Function]`(event: FocusEvent) => void` | ### Exposes | Name | Description | Type | | ----- | -------------------------------- | ----------------------- | | focus | get focus the input component | ^[Function]`() => void` | | blur | remove focus the input component | ^[Function]`() => void` |