Skip to content

PrimeInputNumber

A FormKit wrapper for PrimeVue's InputNumber component.

Live Example on Website

Usage

vue
<FormKit type="primeinputnumber" v-model="value" />

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeInputNumber', name: 'firstNumber', label: 'Input Number', value: 1234, validation: 'max:10000', useGrouping: true, minFractionDigits: 2 },
  { $formkit: 'primeInputNumber', name: 'secondNumber', label: 'Input Number', value: 999, validation: 'min:900', useGrouping: false, minFractionDigits: 0 },
  { $formkit: 'primeInputNumber', name: 'fixedNumber', label: 'Input Number', value: 1234, class: 'customClass', style: { background: 'gray' }, readonly: true },
  { $formkit: 'primeInputNumber', name: 'numberInputWithMinNumber', label: 'Number Input with Min Value', min: 10 },
  { $formkit: 'primeInputNumber', name: 'customizedInputNumber', label: 'Customized Input Number', placeholder: 'Enter currency', useGrouping: true, minFractionDigits: 2, maxFractionDigits: 4, mode: 'currency', currency: 'USD', locale: 'en-US', showButtons: true, buttonLayout: 'horizontal', step: 0.01 },
]
const data = {}
</script>

<template>
  <FormKit :schema="schema" :data="data" />
</template>

Props

NameTypeDescription
useGroupingbooleanUse grouping separators
minnumberMinimum value
maxnumberMaximum value
minFractionDigitsnumberMinimum fraction digits
maxFractionDigitsnumberMaximum fraction digits
localestringLocale for formatting
modestringInput mode (decimal, currency)
currencystringCurrency code
prefixstringPrefix text
suffixstringSuffix text
showButtonsbooleanShow increment/decrement buttons
buttonLayoutstringButton layout
stepnumberStep increment
ptobjectPass-through options
ptOptionsobjectPass-through options
unstyledbooleanDisable default styles
placeholderstringPlaceholder text
sizestringInput size

See PrimeVue InputNumber docs for more details.

FormKit PrimeVue Module