QInputNumber 🔢
Provides an input field accepting only numbers. Try a sandbox story
Example
Default view:
Using in template:
<q-input-number v-model="value" />
1
Using in component instance:
setup() {
const value = ref(123456);
return { value }
}
1
2
3
4
5
2
3
4
5
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"
/>
1
2
3
4
2
3
4
Result:
disabled
- Type:
Boolean - Default:
null
Sets disabled input state
<q-input-number
v-model="value"
:disabled="true"
/>
1
2
3
4
2
3
4
Result:
min
- Type:
Number - Default:
null
Minimum allowed value. Must be less than maximum value.
<q-input-number
v-model="value"
:min="0"
/>
1
2
3
4
2
3
4
Result:
max
- Type:
Number - Default:
null
Maximum allowed value. Must be higher than minimum value.
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>
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
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
suffix
Set your custom content as a suffix.