GrNumberInput

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. success and warning additionally show an icon and a hidden caption that goes into the field’s aria-describedby: the colour of the border as the only carrier of meaning is WCAG 1.4.1, and these two states have no ARIA equivalent of aria-invalid. danger gets no icon — its meaning is already carried by aria-invalid and the error text from GrFormField — and the sign goes out as soon as the field is declared invalid. 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.