Vue InputNumber is an input component to provide numerical input. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.
Setup
Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.
Import
import InputNumber from 'primevue/inputnumber';
Getting Started
InputNumber is used with the standard v-model directive. Component always provides a number type although formatting on the input is a string.
<InputNumber v-model="value" />
Decimal Mode
Format is defined using the mode property, "decimal" is the default value allowing only integers when there is no other configuration.
<InputNumber v-model="value" mode="decimal" />
Fractions are configured with the minFractionDigits property. Optionally maxFractionDigits can be used to defined a boundary for the maximum digits.
<InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" />
<InputNumber v-model="value2" mode="decimal" :minFractionDigits="2" :maxFractionDigits="2" />
locale option is available to set the localization information such as grouping and decimal symbols where default value is the browser locale. Locales are defined per BCP Language Tag.
User Locale
<InputNumber v-model="value1" mode="decimal" :minFractionDigits="2" />
United State Locale
<InputNumber v-model="value2" mode="decimal" locale="en-US" :minFractionDigits="2" />
German Locale
<InputNumber v-model="value3" mode="decimal" locale="de-DE" :minFractionDigits="2" />
Indian Locale
<InputNumber v-model="value4" mode="decimal" locale="en-IN" :minFractionDigits="2" />
Currency
Currency formatting is specified by setting the mode option to currency and currency property. In addition currencyDisplay option allows how the currency is displayed, valid values are "symbol" (default) or "code".
United States
<InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" />
Germany
<InputNumber v-model="value2" mode="currency" currency="EUR" locale="de-DE" />
India
<InputNumber v-model="value3" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
Japan
<InputNumber v-model="value4" mode="currency" currency="JPY" locale="jp-JP" />
Prefix and Suffix
Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.
Mile
<InputNumber v-model="value1" suffix=" mi" />
Percent
<InputNumber v-model="value2" prefix="%" />
Expiry
<InputNumber v-model="value3" prefix="Expires in " suffix=" days" />
Temperature
<InputNumber v-model="value4" prefix="↑ " suffix="℃" :min="0" :max="40" />
Buttons
Spinner buttons is enabled using the showButtons options and layout is defined with the buttonLayout. Default value is "stacked" whereas "horizontal" and "stacked" are alternatives. Note that even there are no buttons, up and down arrow keys can be used to spin the values with keyboard.
Stacked
<InputNumber v-model="value1" showButtons mode="currency" currency="USD" />
Horizontal
<InputNumber v-model="value2" showButtons buttonLayout="horizontal"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
Vertical
<InputNumber v-model="value3" mode="decimal" showButtons buttonLayout="vertical"
decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
Step
Step factor is 1 by default and can be customized with step option.
<InputNumber v-model="value" :step="0.25" />
Min and Max Boundaries
Value to be entered can be restricted by configuring the min and max options.
<InputNumber v-model="value" :min="0" :max="100" />
Theming
InputNumber supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeVue InputNumber showcase for demos and documentation.