packages/docs/src/pages/en/components/number-inputs.md
The VNumberInput extends the standard HTML number-type input, ensuring style consistency across browsers as a replacement for <input type="number">
Here we display a list of settings that could be applied within an application.
<ExamplesUsage name="v-number-input" /> <PromotedEntry />| Component | Description |
|---|---|
| v-number-input | Primary Component |
::: warning v-number-input is designed for simple numeric input usage. It has limitations with very long integers and highly precise decimal arithmetic due to JavaScript number precision issues:
For integers, v-model is restricted within Number.MIN_SAFE_INTEGER and Number.MAX_SAFE_INTEGER to ensure precision is not lost.
To cope with JavaScript floating-point issues (e.g. 0.1 + 0.2 === 0.30000000000000004), Vuetify's internal logic uses toFixed() with the maximum number of decimal places between v-model and step. If accurate arbitrary-precision decimal arithmetic is required, consider working with strings using decimal.js and v-text-field instead. :::
The v-number-input component is built upon the v-field and v-input components. It is used as a replacement for <input type="number">, accepting numeric values from the user.
The v-number-input component has support for most of v-field's props and is follows the same design patterns as other inputs.
The control-variant prop offers an easy way to customize steppers button layout. The following values are valid options: default, stacked, split and hidden.
The reverse prop automatically changes the stepper buttons' position to the opposite side for both the default and stacked control variants.
The hide-input prop hides the input field, allowing only the stepper buttons to be visible. These stepper buttons follow a stacked control-variant layout.
The inset prop adjusts the style of the stepper buttons by reducing the size of the button dividers.
The min and max props specify the minimum and maximum values accepted by v-number-input, behaving identically to the native min and max attributes for <input type="number">.
The step prop behaves the same as the step attribute in the <input type="number">, it defines the incremental steps for adjusting the numeric value.
The precision prop enforces strict precision. It is expected to be an integer value in range between 0 and 15. Input will prevent user from typing or pasting an invalid value.
The grouping prop enables digit grouping (e.g. thousands separators). The value is passed to Intl.NumberFormat - "auto" should be preferred over true. Use group-separator to override the separator character.