InputNumber is an input component to provide numerical input.
import InputNumber from 'primevue/inputnumber';
InputNumber is used as a controlled input with v-model property.
<InputNumber v-model="value1" inputId="integeronly" />
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" />
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" />
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" />
Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" />
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" />
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" />
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" />
Monetary values are enabled by setting mode property as currency. In this setting, currency property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" />
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" />
Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.
<InputNumber v-model="value1" inputId="mile" suffix=" mi" />
<InputNumber v-model="value2" inputId="percent" prefix="%" />
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" />
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" />
Spinner buttons are enabled using the showButtons property and layout is defined with the buttonLayout.
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" />
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" />
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25"
decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus"
mode="currency" currency="EUR" />
Buttons can also placed vertically by setting buttonLayout as vertical.
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 4rem"
decrementButtonClassName="p-button-secondary" incrementButtonClassName="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
A floating label appears on top of the input field when focused.
<span class="p-float-label">
<InputNumber id="number-input" v-model="value" />
<label for="number-input">Number</label>
</span>
Invalid state style is added using the p-invalid class to indicate a failed validation.
<InputNumber v-model="value" class="p-invalid" mode="decimal" :minFractionDigits="2" />
Compatibility with popular Vue form libraries.
VeeValidate is a popular library for handling forms in Vue.
<template>
<div class="card flex justify-content-center">
<form @submit="onSubmit" class="flex flex-column gap-2">
<label for="year">Enter a year between 1960-2050.</label>
<InputNumber id="year" v-model="value" :class="{ 'p-invalid': errorMessage }" :useGrouping="false" aria-describedby="number-error" />
<small class="p-error" id="number-error">{{ errorMessage || (errors.length > 0 ? errors : ' ') }}</small>
<Button type="submit" label="Submit" />
</form>
<Toast />
</div>
</template>
When disabled is present, the element cannot be edited and focused.
<InputNumber v-model="value" disabled prefix="%" />
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| p-inputnumber | Container element |
| p-inputnumber-stacked | Container element with stacked buttons. |
| p-inputnumber-horizontal | Container element with horizontal buttons. |
| p-inputnumber-vertical | Container element with vertical buttons. |
| p-inputnumber-input | Input element |
| p-inputnumber-button | Input element |
| p-inputnumber-button-up | Increment button |
| p-inputnumber-button-down | Decrement button |
| p-inputnumber-button-icon | Button icon |
Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props. The input element uses spinbutton role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes.
<label for="price">Price</label>
<InputNumber inputId="price" />
<span id="label_number">Number</span>
<InputNumber aria-labelledby="label_number" />
<InputNumber aria-label="Number" />
| Key | Function |
|---|---|
| tab | Moves focus to the input. |
| up arrow | Increments the value. |
| down arrow | Decrements the value. |
| home | Set the minimum value if provided. |
| end | Set the maximum value if provided. |