Tailwind CSS Presets for PrimeVue Launched 🚀

InputNumber

InputNumber is an extension to standard input element.

Import #


import InputNumber from 'primevue/inputnumber';

Numerals #

InputNumber is used as a controlled input with v-model property.

Integer Only

Without Grouping

Min-Max Fraction Digits

Min-Max Boundaries


<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" />

Locale #

Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.

User Locale

United States Locale

German Locale

Indian 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" />

Currency #

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.

United States

Germany

India

Japan


<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" />

Prefix & Suffix #

Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.

Mile

Percent

Expiry

Temperature


<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="&uarr; " suffix="℃" :min="0" :max="40" />

Buttons #

Spinner buttons are enabled using the showButtons property and layout is defined with the buttonLayout.

Stacked

Min-Max Boundaries

Horizontal with Step


<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" />

Vertical #

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" />

Invalid #

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.


<InputNumber v-model="value" invalid mode="decimal" :minFractionDigits="2" />

Disabled #

When disabled is present, the element cannot be edited and focused.


<InputNumber v-model="value" disabled prefix="%" />

Accessibility #

Screen Reader

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" />

Keyboard Support

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.