DEV Community

loading...
Cover image for Vue3 InputNumber

Vue3 InputNumber

primetek profile image PrimeTek ・3 min read

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';
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

Step

Step factor is 1 by default and can be customized with step option.

<InputNumber v-model="value" :step="0.25" />
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide