Forms

NumberInput

A numeric input with increment/decrement controls and min/max/step support.

html
<UiNumberInput />

Model value

modelValue is the numeric value, two-way bound — a number, not the input's string.

Value: —

Placeholder

placeholder is shown while the field is empty. An example of the expected magnitude does more work here than the word the label already carries.

Disabled

disabled disables the field and both stepper controls.

Variant

variant picks between the ringed outline field on the page background and the filled, tinted soft one with no ring.

Orientation

orientation sets where the increment and decrement controls sit — either side of the field, or stacked at its end.

horizontal (default)
vertical

Min

min is the floor. The decrement control disables itself once the value reaches it.

Max

max is the ceiling, and the mirror of min.

Step

step sets how much each press of a control moves the value. A decimal step also sets how the value is rounded.

Wrapped in FormField


API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
number
The current numeric value.
string
Placeholder text shown when the input is empty.
boolean
false
Disables the input and the increment/decrement controls.
"outline" | "soft"
'outline'
"horizontal" | "vertical"
'horizontal'
Where the increment/decrement controls are placed.
number
-Infinity
number
Infinity
number
1

Emits

Event
Payload
Description
update:modelValue
[value: number | undefined]