Forms

INumberInput

A numeric field whose model is a string rather than a number, so a value never passes through a JavaScript float on its way to your API.

Keep the value a string end to end and do the arithmetic with the decimal helpers, a decimal library, or on the server.

Precision

precision fixes the number of decimal places, so 1240 shows and submits as 1240.00.

min, max and step are strings too, for the same reason the model is.

The stepper buttons are on by default. Drop them where the value is typed rather than nudged.

locale decides how the value is displayed and which decimal separator is accepted while typing. The model stays a plain machine-readable string.

vue

<INumberInput v-model="amount" :precision="2" locale="de-DE" />

Prop	Type	Default	Description
`min` / `max`	`string`	—	Bounds, as strings
`step`	`string`	`'1'`	Stepper increment
`precision`	`number`	—	Fixed decimal places
`locale`	`string`	—	Display and separator handling
`stepper`	`boolean`	`true`	Shows the increment/decrement buttons
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control scale
`placeholder`	`string`	—	Placeholder text
`disabled`	`boolean`	`false`	Disables the field
`required`	`boolean`	`false`	Marks it required
`invalid`	`boolean`	—	Error styling; set automatically inside `IFormField`
`id`	`string`	generated	Useful when an external `ILabel` targets it
`incrementLabel`	`string`	`'Increment'`	Accessible name for the up button
`decrementLabel`	`string`	`'Decrement'`	Accessible name for the down button
`unstyled`	`boolean`	—	Drop built-in classes
`class`	`string`	—	Merged with the built-in classes
`ui`	`{ root?, input?, stepper?, step? }`	—	Per-slot class overrides

class lands on the root, the box the whole control occupies — size the field there, and reach the <input> itself with ui.input.

vue

<INumberInput v-model="amount" class="max-w-xs" />

Attributes go to the input, so with no visible label put aria-label on the component.