QInputNumber 🔢

Provides an input field accepting only numbers. Try a sandbox story

Example

Default view:

Using in template:

<q-input-number v-model="value" />

Using in component instance:

setup() {
  const value = ref(123456);

  return { value }
}

Props

modelValue

• Type: Number
• Default: null

Binding value

precision

• Type: Number
• Default: null

Number of digits after decimal separator

<q-input-number
  v-model="value"
  :precision="2"
/>

Result:

disabled

• Type: Boolean
• Default: null

Sets disabled input state

<q-input-number
  v-model="value"
  :disabled="true"
/>

Result:

min

• Type: Number
• Default: null

Minimum allowed value. Must be less than maximum value.

<q-input-number
  v-model="value"
  :min="0"
/>

Result:

max

• Type: Number
• Default: null

Maximum allowed value. Must be higher than minimum value.

prefix

• Type: String
• Default: null

If input not in focus, the prefix will be displayed before main value.

<q-input-number
  v-model="value"
  prefix="Distance:"
/>

suffix

• Type: String
• Default: null

If input not in focus, the suffix will be displayed after main value.

<q-input-number
  v-model="value"
  suffix="hours"
/>

validateEvent

• Type: Boolean
• Default: null

If input is wrapped in QFormItem, prop validateEvent defines if bound events will be validated immediately

<q-form
  :model="model"
  :rules="rules"
>
  <q-form-item prop="value">
    <q-input-number 
      v-model="model.value" 
      validate-event 
    />
  </q-form-item>
</q-form>

Events

update:modelValue

Triggers when model updates.

input

Triggers when native input event fires

change

Triggers when an alteration to input value is committed by the user

focus

Triggers when input gets focus

blur

Triggers when input loses focus

Slots

postfix

Set your custom content as a postfix.