npx volt-vue add InputNumber
import InputNumber from '@/volt/InputNumber.vue';
InputNumber is used with the v-model property for two-way value binding.
<template>
<div class="card flex flex-wrap gap-4">
<div class="flex-auto">
<label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
<InputNumber v-model="value1" inputId="integeronly" fluid />
</div>
<div class="flex-auto">
<label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
<InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
</div>
<div class="flex-auto">
<label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
<InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
</div>
<div class="flex-auto">
<label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
<InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
</div>
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value1 = ref(42723);
const value2 = ref(58151);
const value3 = ref(2351.35);
const value4 = ref(50);
</script>
Localization information such as grouping and decimal symbols are defined with the locale property which defaults to the user locale.
<template>
<div class="card flex flex-wrap gap-4">
<div class="flex-auto">
<label for="locale-user" class="font-bold block mb-2"> User Locale </label>
<InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
</div>
<div class="flex-auto">
<label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
<InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
</div>
<div class="flex-auto">
<label for="locale-german" class="font-bold block mb-2"> German Locale </label>
<InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
</div>
<div class="flex-auto">
<label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
<InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
</div>
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value1 = ref(151351);
const value2 = ref(115744);
const value3 = ref(635524);
const value4 = ref(732762);
</script>
Monetary values are enabled by setting mode property as currency. In this setting, currency property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.
<template>
<div class="card flex flex-wrap gap-4">
<div class="flex-auto">
<label for="currency-us" class="font-bold block mb-2"> United States </label>
<InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
</div>
<div class="flex-auto">
<label for="currency-germany" class="font-bold block mb-2"> Germany </label>
<InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
</div>
<div class="flex-auto">
<label for="currency-india" class="font-bold block mb-2"> India </label>
<InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
</div>
<div class="flex-auto">
<label for="currency-japan" class="font-bold block mb-2"> Japan </label>
<InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
</div>
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value1 = ref(1500);
const value2 = ref(2500);
const value3 = ref(4250);
const value4 = ref(5002);
</script>
Custom texts e.g. units can be placed before or after the input section with the prefix and suffix properties.
<template>
<div class="card flex flex-wrap gap-4">
<div class="flex-auto">
<label for="mile" class="font-bold block mb-2"> Mile </label>
<InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
</div>
<div class="flex-auto">
<label for="percent" class="font-bold block mb-2"> Percent </label>
<InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
</div>
<div class="flex-auto">
<label for="expiry" class="font-bold block mb-2"> Expiry </label>
<InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
</div>
<div class="flex-auto">
<label for="temperature" class="font-bold block mb-2"> Temperature </label>
<InputNumber v-model="value4" inputId="temperature" prefix="↑ " suffix="℃" :min="0" :max="40" fluid />
</div>
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value1 = ref(20);
const value2 = ref(50);
const value3 = ref(10);
const value4 = ref(20);
</script>
Spinner buttons are enabled using the showButtons property and layout is defined with the buttonLayout.
<template>
<div class="card flex flex-wrap gap-4">
<div class="flex-auto">
<label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
<InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
</div>
<div class="flex-auto">
<label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
<InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
</div>
<div class="flex-auto">
<label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
<InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
</div>
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value1 = ref(20);
const value2 = ref(25);
const value3 = ref(10.5);
</script>
Buttons can also placed vertically by setting buttonLayout as vertical.
<template>
<div class="card flex justify-center">
<InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
<template #incrementbuttonicon>
<span class="pi pi-plus" />
</template>
<template #decrementbuttonicon>
<span class="pi pi-minus" />
</template>
</InputNumber>
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value = ref(50);
</script>
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<template>
<div class="card flex justify-center">
<InputNumber v-model="value" variant="filled" />
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
InputNumber provides small and large sizes as alternatives to the base.
<template>
<div class="card flex flex-col items-center gap-4">
<InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
<InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value1 = ref(null);
const value2 = ref(null);
const value3 = ref(null);
</script>
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
<template>
<div class="card flex flex-wrap justify-center gap-4">
<InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value = ref(null);
</script>
When disabled is present, the element cannot be edited and focused.
<template>
<div class="card flex justify-center">
<InputNumber v-model="value" disabled prefix="%" />
</div>
</template>
<script setup lang="ts">
import InputNumber from '@/volt/InputNumber.vue';
import { ref } from 'vue';
const value = ref(50);
</script>