GrNumberInput

• the value is numeric — a quantity, a price, a percentage: v-model gives a number rather than a string;
• there is a step and there are bounds — step, min, max with ± buttons and hold-to-repeat;
• precision matters — precision together with a separator and digit grouping by locale;
• an empty value is allowed — null means “not filled in” rather than zero.

The difference from GrInput type="number" is not cosmetic: a native numeric field gives away a string, loses the value on invalid input and behaves differently across browsers. Here the model is number | null, and null differs from zero.

v-model is number | null, where null means “empty”. The same as in GrSlider: a numeric control gives away a number rather than a string the consumer has to parse themselves.

The objection to a numeric model went like this: an unfinished input (”-”, “1,”) is not a number, and turning it into NaN on every keystroke is not allowed. It is answered by a division of roles — an unfinished entry simply is not obliged to be the model:

• the draft is a string exactly as it is being typed. It lives inside the field until the entry is finished, and it is exactly what is shown on the screen;
• the model is a number. While the draft does not parse into a number, the model says null rather than storing a half-finished thing.

A commit (change, the loss of focus, a step by a button or a key) removes the draft: min/max and precision are applied, and the display is computed from the model again. That is exactly why precision="2" does not turn “7” into “7.00” right under the cursor — only when the entry is finished.

decimalSeparator stops being part of the value and remains what it was — a way of displaying and entering the fractional part. In the model 1,25 with decimal-separator="," lies as 1.25.

<GrNumberInput v-model="qty" controls :min="1" :max="10" />

controls shows the buttons, and controlsDirection puts them in a column on the right or on both sides of the field.

A button dims at its own bound — at the maximum the ”+” is unavailable rather than silently idle. In readonly both dim: a button that is known to be refused is misleading. Holding a button steps repeatedly (a pause of 400 ms, then every 60 ms) and stops at a bound, on release and when the cursor leaves. The final click of such a hold gives no step — that is the tail of a gesture rather than a new intent. A keyboard activation (Enter/Space) never falls under that rule: it always steps, even if the gesture before it was interrupted without a click.

The button does not take the focus for itself: having pressed Enter on the ”+”, a keyboard user stays on it and can press again. The field is focused only when the step came from it — from the ↑/↓ arrows.

step sets the size of a step, and precision how many digits to keep. A fractional step does not accumulate binary error even without precision: the result is rounded to the number of digits of the larger operand, so three presses of ↑ with step="0.1" give 0.3 rather than 0.30000000000000004.

PageUp/PageDown step coarsely — by the same rule as in GrSlider: ten steps or a tenth of the range, whichever is larger. Without min/max set there is no range, and ten steps remain.

useGrouping shows the value with digit separators while the field is not focused: while editing, the grouping would get in the way. The locale comes from the locale prop, and if it is not set, from the i18n adapter of the package, so in a multilingual application it does not have to be passed to every field.

With grouping, the formatted value goes into aria-valuetext — otherwise a screen reader would read the raw number. Without grouping the attribute is not set: aria-valuenow already carries the same thing.

clearable adds a cross; it is not shown when the value is empty, in readonly and in disabled. Clearing emits clear and returns the focus to the field.

The set of events matches GrInput: update:modelValue, change, focus, blur, clear.

state (default | success | warning | danger) sets the hue of the border, and invalid forces the red one. disabled dims the field with the --gr-disabled-* tokens rather than with transparency: opacity dilutes text colours tuned to AA.

A readonly field behaves like text: the arrows, PageUp/PageDown and Home/End are given to the native caret, and the value is changed neither by keys, nor by the ”±” buttons (they are unavailable in this state), nor by the auto-repeat.