---
category: Components
type: Data Entry
title: InputNumber
cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original
---

Enter a number within certain range with the mouse or keyboard.

## When To Use

When a numeric value needs to be provided.

## API

| property | description | type | default |  |
| --- | --- | --- | --- | --- |
| addonAfter | The label text displayed after (on the right side of) the input field | slot | - | 3.0 |
| addonBefore | The label text displayed before (on the left side of) the input field | slot | - | 3.0 |
| autofocus | get focus when component mounted | boolean | false |  |
| bordered | Whether has border style | boolean | true | 3.0 |
| controls | Whether to show `+-` controls | boolean | true | 3.0 |
| decimalSeparator | decimal separator | string | - |  |
| defaultValue | initial value | number |  |  |
| disabled | disable the input | boolean | false |  |
| formatter | Specifies the format of the value presented | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 3.0 |
| keyboard | If enable keyboard behavior | boolean | true | 3.0 |
| max | max value | number | Infinity |  |
| min | min value | number | -Infinity |  |
| parser | Specifies the value extracted from formatter | function( string): number | - |  |
| precision | precision of input value | number | - |  |
| prefix | The prefix icon for the Input | slot | - | 3.0 |
| size | height of input box | string | - |  |
| status | Set validation status | 'error' \| 'warning' | - | 3.3.0 |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |  |
| stringMode | Set value as string to support high precision decimals. Will return string value by `change` | boolean | false | 3.0 |
| value(v-model) | current value | number |  |  |
| upIcon | custom up icon | slot | `<UpOutlined />` | 3.3.0 |
| downIcon | custom up down | slot | `<DownOutlined />` | 3.3.0 |

### events

| Events Name | Description | Arguments | Version |  |
| --- | --- | --- | --- | --- |
| change | The callback triggered when the value is changed. | function(value: number \| string) |  |  |
| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) |  | 1.5.0 |
| step | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | 3.0 |  |

## Methods

| Name    | Description  |
| ------- | ------------ |
| blur()  | remove focus |
| focus() | get focus    |

## FAQ

### Why `value` can exceed `min` or `max` in control?

Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.

### Why dynamic change `min` or `max` which makes `value` out of range will not trigger `change`?

`change` is user trigger event. Auto trigger will makes form lib can not detect data modify source.