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.

<script setup lang="ts">
// A string, deliberately.
const quantity = ref('3')
</script>

<template>
  <INumberInput v-model="quantity" />
</template>

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.

<INumberInput v-model="amount" :precision="2" />
<INumberInput v-model="rate" :precision="3" step="0.001" />

Bounds and step ​

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

<INumberInput v-model="seats" min="1" max="10" step="1" />

Without the stepper ​

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

<INumberInput v-model="amount" :stepper="false" />

Locale ​

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

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

Sizes ​

<INumberInput v-model="quantity" size="sm" />
<INumberInput v-model="quantity" size="md" />
<INumberInput v-model="quantity" size="lg" />

Props ​

Sizing it ​

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

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

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