Skip to main content

​
Usage

The VNumberInput component extends VTextField with number-specific controls and validation. 
<template>
  <v-number-input
    v-model="number"
    label="Quantity"
  />
</template>

<script setup>
import { ref } from 'vue'
const number = ref(0)
</script>

​
Min and Max

Constrain values to a specific range: 
<template>
  <v-number-input
    v-model="number"
    :min="0"
    :max="100"
  />
</template>

​
Step Increments

Define the increment/decrement step: 
<template>
  <v-number-input
    v-model="number"
    :step="5"
  />
</template>

​
Control Variants

Choose different control layouts: 
<template>
  <!-- Default: Controls on the right -->
  <v-number-input v-model="number" />
  
  <!-- Stacked: Controls stacked vertically -->
  <v-number-input
    v-model="number"
    control-variant="stacked"
  />
  
  <!-- Split: Controls on both sides -->
  <v-number-input
    v-model="number"
    control-variant="split"
  />
  
  <!-- Hidden: No controls visible -->
  <v-number-input
    v-model="number"
    control-variant="hidden"
  />
</template>

​
Precision

Control decimal places: 
<template>
  <v-number-input
    v-model="number"
    :precision="2"
  />
</template>

​
Hide Input

Show only the controls: 
<template>
  <v-number-input
    v-model="number"
    hide-input
  />
</template>

​
Inset Controls

Place controls inside the input field: 
<template>
  <v-number-input
    v-model="number"
    inset
  />
</template>

​
Reverse Controls

Position controls on the left: 
<template>
  <v-number-input
    v-model="number"
    reverse
  />
</template>

​
Props

​
modelValue
number
default:"null"
The v-model value of the component
​
min
number
default:"Number.MIN_SAFE_INTEGER"
The minimum allowed value
​
max
number
default:"Number.MAX_SAFE_INTEGER"
The maximum allowed value
​
step
number
default:"1"
The increment/decrement step value
​
precision
number
default:"0"
Number of decimal places to display and allow
​
minFractionDigits
number
Minimum number of fraction digits to display
​
decimalSeparator
string
Custom decimal separator character. Defaults to locale-specific separator
​
controlVariant
'default' | 'stacked' | 'split' | 'hidden'
default:"default"
The layout style for increment/decrement controls
​
inset
boolean
default:"false"
Positions the controls inside the input field
​
hideInput
boolean
default:"false"
Hides the input field, showing only the controls
​
reverse
boolean
default:"false"
Positions the controls on the left side of the input
​
disabled
boolean
Disables the input and controls
​
readonly
boolean
Makes the input read-only
​
error
boolean
Puts the input in an error state
​
label
string
Label text for the input
​
hint
string
Hint text to display below the input
​
persistentHint
boolean
Forces hint to always be visible
​
variant
'outlined' | 'filled' | 'solo' | 'plain' | 'underlined'
Visual variant of the input
​
density
'default' | 'comfortable' | 'compact'
Adjusts the vertical spacing
​
color
string
Applies specified color to the control

​
Slots

​
increment
slot
Slot to customize the increment button
​
decrement
slot
Slot to customize the decrement button
​
prepend
slot
Slot for content before the input
​
append
slot
Slot for content after the input
​
prepend-inner
slot
Slot for content inside the input, before the value
​
append-inner
slot
Slot for content inside the input, after the value

​
Events

​
update:modelValue
event
Emitted when the value changes
​
update:focused
event
Emitted when focus state changes
The component automatically validates input and prevents values outside the min/max range. Values are clamped to the valid range on blur.
Keyboard support includes arrow keys (up/down) to increment/decrement values while the input is focused.
The increment and decrement buttons support long-press for continuous value changes.

Build docs developers (and LLMs) love

Get started for freeTalk to us