--- 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 ::: ## Attributes | Attribute | Description | Type | Accepted Values | Default | | ----------------------------- | ------------------------------------------------ | ---------------------- | --------------- | ----------- | | model-value / v-model | binding value | number / undefined | — | — | | 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 | string | large/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 | string | right | - | | name | same as `name` in native input | string | — | — | | label | label text | string | — | — | | placeholder | placeholder in input | string | - | - | | value-on-clear **(\> 2.2.0)** | value should be set when input box is cleared | string / number / null | min/max | - | | validate-event | whether to trigger form validation | boolean | - | true | ## Events | Event Name | Description | Parameters | | ---------- | ------------------------------- | ------------------------------------------------------ | | change | triggers when the value changes | (currentValue: number \| NaN, oldValue: number \| NaN) | | blur | triggers when Input blurs | (event: Event) | | focus | triggers when Input focuses | (event: Event) | ## Methods | Method | Description | Parameters | | ------ | -------------------------------- | ---------- | | focus | get focus the input component | - | | blur | remove focus the input component | — |