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. Backed by the Wijmo WjInputNumber control.

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

Emits

Event	Payload	Description
update:modelValue	number \| null	Value 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" />

Left-aligned

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