Note

This documentation describes the InputNumber Vue component for native UI views, for Xml templates see input-number.

InputNumber

A numeric input with min/max validation, formatting, alignment, and an optional step increment. Built on Textbox.

• Only the characters of a number can be typed, with no more decimals than the format shows. A point or a comma that is not the group separator of the culture types the decimal separator, and a space types the group separator of a culture that separates groups with a space. A pasted text holding other characters than those of a number is kept as is, as an invalid value.
• Minus toggles the sign and plus removes it, wherever the caret is. Minus is ignored when minValue is not negative. With showPositiveSign, a positive number is displayed with a leading plus sign (+3, but 0 has none).
• The value is emitted on change, on blur and on Enter, rounded to the format, and on each keystroke when updateMode is immediate, except while a formula is typed. A text left unchanged emits nothing. A text that is no number stays in the input with an error message: it is the invalidValue. Escape restores the value the input had when it got the focus. A click selects the whole text.
• With a step, the input is a spin button: its - and + buttons repeat while held, the up and down arrows step the value, Page Up and Page Down step it ten times, Home and End go to minValue and maxValue, and the mouse wheel steps the value of the focused input. A stepped value stays within minValue and maxValue. A typed value is never clamped: out of range, it displays an error message.
• With calculable, the input also takes a formula: = starts an empty formula, and an operator (+ - * / % ^ ( )) typed on a number starts a formula of that number. A formula takes digits, operators, spaces and the separators of the culture. Enter or leaving the input evaluates it and emits its result, rounded to the format, and a formula that cannot be evaluated stays in the input as the invalidValue. With a percentage format, a formula works on percentages typed without their sign. With enableMask, the number being typed is formatted at each keystroke: its digits are grouped and the currency or percent sign of the format is added. previewModePosition shows the result of the formula while it is typed, and screen readers announce it.

Import

import { InputNumber } from '@neos/design-system'

Props

Inherits all shared input props, plus:

Prop	Type	Default	Description
modelValue	number \| null	null	Bound value (v-model)
format	string	undefined	Wijmo number format string (e.g. 'n2', 'c2', 'p0')
minValue	number \| null	undefined	Minimum allowed value
maxValue	number \| null	undefined	Maximum allowed value
alignment	'left' \| 'right'	'right'	Text alignment inside the input
step	number	undefined	Increment/decrement step value
invalidValue	string \| null	undefined	Committed text that is no number (v-model)
showPositiveSign	boolean	false	Whether a positive number is displayed with a plus sign
calculable	boolean	false	Whether the input takes a formula
enableMask	boolean	true	Whether a calculable input formats the number typed
previewModePosition	'hidden' \| 'left' \| 'top'	'hidden'	Position of the formula result of a calculable input
contentClass	ContentClass	undefined	Class of the number box
contentStyle	ContentStyle	undefined	Style of the number box

Emits

Event	Payload	Description
update:modelValue	number \| null	Value change
update:invalidValue	string \| null	Invalid text change
aiApply / aiCancel	—	AI suggestion events
update:focused	boolean	Focus state change

Slots

Slot	Description
before	Content before the number input
default	Content after the number input

Usage Examples

Basic number input

<InputNumber v-model="quantity" label="Quantity" />

Currency with 2 decimal places

<InputNumber v-model="price" label="Price" format="c2" />

Bounded integer with step

<InputNumber v-model="age" label="Age" :min-value="0" :max-value="120" :step="1" format="n0" />

Percentage

<InputNumber v-model="discount" label="Discount (%)" format="p0" :min-value="0" :max-value="1" />

Calculable

<InputNumber v-model="amount" label="Amount" format="n2" calculable preview-mode-position="left" />

Left-aligned

<InputNumber v-model="code" label="Reference" alignment="left" />