PrimeBlocks: One-Time Purchase Replaces Subscription Model 🎉Learn More

InputNumber

InputNumber is an input component to provide numerical input.

Import #


import InputNumber from 'primevue/inputnumber';

Numerals #

InputNumber is used with the v-model property for two-way value binding.

Integer Only

Without Grouping

Min-Max Fraction Digits

Min-Max Boundaries


<InputNumber v-model="value1" inputId="integeronly" fluid />
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />

Forms #

InputNumber integrates seamlessly with the PrimeVue Forms library.


<Form v-slot="$form" :resolver="resolver" :initialValues="initialValues" @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-56">
    <div class="flex flex-col gap-1">
        <InputNumber name="amount" fluid />
        <Message v-if="$form.amount?.invalid" severity="error" size="small" variant="simple">{{ $form.amount.error?.message }}</Message>
    </div>
    <Button type="submit" severity="secondary" label="Submit" />
</Form>

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" fluid />
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />

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" fluid />
<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" fluid />
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />

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" fluid />
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
<InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />

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" fluid />
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
    <template #incrementbuttonicon>
        <span class="pi pi-plus" />
    </template>
    <template #decrementbuttonicon>
        <span class="pi pi-minus" />
    </template>
</InputNumber>

Vertical #

Buttons can also placed vertically by setting buttonLayout as vertical.


<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
    <template #incrementbuttonicon>
        <span class="pi pi-plus" />
    </template>
    <template #decrementbuttonicon>
        <span class="pi pi-minus" />
    </template>
</InputNumber>

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<InputNumber v-model="value" variant="filled" />

Float Label #

A floating label appears on top of the input field when focused. Visit FloatLabel documentation for more information.

Over LabelIn LabelOn Label


<FloatLabel>
    <InputNumber v-model="value1" inputId="over_label" mode="currency" currency="USD" locale="en-US" />
    <label for="over_label">Over Label</label>
</FloatLabel>

<FloatLabel variant="in">
    <InputNumber v-model="value2" inputId="in_label" mode="currency" currency="USD" locale="en-US" variant="filled" />
    <label for="in_label">In Label</label>
</FloatLabel>

<FloatLabel variant="on">
    <InputNumber v-model="value3" inputId="on_label" mode="currency" currency="USD" locale="en-US" />
    <label for="on_label">On Label</label>
</FloatLabel>

Ifta Label #

IftaLabel is used to create infield top aligned labels. Visit IftaLabel documentation for more information.

Price


<IftaLabel>
    <InputNumber v-model="value" inputId="price_input" mode="currency" currency="USD" locale="en-US" variant="filled" />
    <label for="price_input">Price</label>
</IftaLabel>

Sizes #

InputNumber provides small and large sizes as alternatives to the base.


<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />

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="value1" :invalid="value1 === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
<InputNumber v-model="value2" :invalid="value2 === null" mode="decimal" :minFractionDigits="2" variant="filled" placeholder="Amount" />

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.

Build Faster Design Better

490+ ready to use UI blocks crafted with PrimeVue and Tailwind CSS.

Learn More

name	type	default	description
modelValue	Nullable<number>	null	Value of the component.
defaultValue	Nullable<number>	null	The default value for the input when not controlled by `modelValue` .
name	string	null	The name attribute for the element, typically used in form submissions.
format	boolean	true	Whether to format the value.
showButtons	boolean	false	Displays spinner buttons.
buttonLayout	HintedString<"horizontal" \| "vertical" \| "stacked">	stacked	Layout of the buttons.
incrementButtonClass	string	null	Style class of the increment button.
decrementButtonClass	string	null	Style class of the decrement button.
incrementButtonIcon	string	null	Style class of the increment icon.
incrementIcon	string	null	Style class of the increment icon.
decrementButtonIcon	string	null	Style class of the decrement icon.
decrementIcon	string	null	Style class of the decrement icon.
locale	string	null	Locale to be used in formatting.
localeMatcher	HintedString<"lookup" \| "best fit">	best fit	The locale matching algorithm to use. Possible values are 'lookup' and 'best fit'; the default is 'best fit'. See [Locale Negotation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_negotiation) for details.
mode	HintedString<"decimal" \| "currency">	decimal	Defines the behavior of the component.
prefix	string	null	Text to display before the value.
suffix	string	null	Text to display after the value.
currency	string	null	The currency to use in currency formatting. Possible values are the [ISO 4217 currency codes](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency), such as 'USD' for the US dollar, 'EUR' for the euro, or 'CNY' for the Chinese RMB. There is no default value; if the style is 'currency', the currency property must be provided.
currencyDisplay	string	symbol	How to display the currency in currency formatting. Possible values are 'symbol' to use a localized currency symbol such as €, 'code' to use the ISO currency code, 'name' to use a localized currency name such as 'dollar'.
useGrouping	boolean	true	Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
minFractionDigits	number	null	The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
maxFractionDigits	number	null	The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the [ISO 4217 currency code](https://www.six-group.com/en/products-services/financial-information/data-standards.html#scrollTo=maintenance-agency) list (2 if the list doesn't provide that information).
roundingMode	RoundingMode	null	How decimals should be rounded. The default value is `"halfExpand"` , [further information](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#roundingmode).
min	number	null	Minimum boundary value.
max	number	null	Maximum boundary value.
step	number	1	Step factor to increment/decrement the value.
allowEmpty	boolean	true	Determines whether the input field is empty.
highlightOnFocus	boolean	false	Highlights automatically the input value.
size	HintedString<"small" \| "large">	null	Defines the size of the component.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
disabled	boolean	false	When present, it specifies that the component should be disabled.
variant	null \| HintedString<"outlined" \| "filled">	null	Specifies the input variant of the component.
readonly	boolean	false	When present, it specifies that an input field is read-only.
placeholder	string	null	Placeholder text for the input.
fluid	boolean	null	Spans 100% width of the container when enabled.
inputId	string	null	Identifier of the focus input to match a label defined for the chips.
inputClass	string \| object	null	Style class of the input field.
inputStyle	object	null	Inline style of the input field.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Establishes a string value that labels the component.
formControl	Record<string, any>	null	Form control object, typically used for handling validation and form state.
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<InputNumberPassThroughOptions<any>>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
update:modelValue	value: number	void	Emitted when the value changes.
value-change	value: number	void	Emitted when the value changes in uncontrolled mode.
input	event: InputNumberInputEvent	void	Callback to invoke when the value is entered.
focus	event: Event	void	Callback to invoke on focus of input field.
blur	event: InputNumberBlurEvent	void	Callback to invoke on blur of input field.

name	parameters	returnType	description
incrementbutton	scope: { listeners: InputNumberButtonListeners, // InputNumber listeners }	VNode<RendererNode, RendererElement, Object>[]	Custom increment button template.
decrementbutton	scope: { listeners: InputNumberButtonListeners, // InputNumber listeners }	VNode<RendererNode, RendererElement, Object>[]	Custom decrement button template.
incrementbuttonicon		VNode<RendererNode, RendererElement, Object>[]
incrementicon		VNode<RendererNode, RendererElement, Object>[]	Custom increment icon template.
decrementbuttonicon		VNode<RendererNode, RendererElement, Object>[]
decrementicon		VNode<RendererNode, RendererElement, Object>[]	Custom decrement icon template.

name	type	description
originalEvent	Event	Browser event
value	undefined \| string \| number	New value
formattedValue	string	currentValue

name	type	description
originalEvent	Event	Browser event
value	string	Input value

InputNumber

Import #

Numerals #

Forms #

Locale #

Currency #

Prefix & Suffix #

Buttons #

Vertical #

Filled #

Float Label #

Ifta Label #

Sizes #

Invalid #

Disabled #

Accessibility #

Screen Reader

Keyboard Support

InputNumber API

InputNumber #

Props #

Emits #

Slots #

Events #

InputNumberInputEvent #

InputNumberBlurEvent #

Interfaces #

InputNumberPassThroughMethodOptions #

InputNumberSharedPassThroughMethodOptions #

InputNumberPassThroughOptions #

InputNumberPassThroughAttributes #

InputNumberState #

InputNumberButtonListeners #

Types #

RoundingMode #

InputNumberPassThroughOptionType #

InputNumberEmits #

name	type	default	description
instance	any	null	Defines instance.
props	InputNumberProps	null	Defines valid properties.
state	InputNumberState	null	Defines current inline state.
parent	any	null	Defines parent instance.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	InputNumberPassThroughOptionType<T>	null	Used to pass attributes to the root's DOM element.
pcInputText	any	null	Used to pass attributes to the InputText component.
buttonGroup	InputNumberPassThroughOptionType<T>	null	Used to pass attributes to the button group's DOM element.
incrementButton	InputNumberPassThroughOptionType<T>	null	Used to pass attributes to the increment button's DOM element.
incrementIcon	InputNumberPassThroughOptionType<T>	null	Used to pass attributes to the increment icon's DOM element.
decrementButton	InputNumberPassThroughOptionType<T>	null	Used to pass attributes to the decrement button's DOM element.
decrementIcon	InputNumberPassThroughOptionType<T>	null	Used to pass attributes to the decrement icon's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

name	type	default	description
d_modelValue	number	null	Current value state as a number.
d_value	number	null	Current value state as a number.
focused	boolean	false	Current focused state as a boolean.

name	type	default
onMousedown	Function	null
onMouseup	Function	null
onMouseleave	Function	null
onKeydown	Function	null
onKeyup	Function	null