Skip to content

FormOutputNumber ​

A FormKit wrapper for OpenVue's OutputNumber component.

Live Example on Website

Usage ​

vue
<FormKit type="formOutputNumber" v-model="number" />

Object-based Example ​

vue
<script setup>
const schema = [
  { $formkit: 'formOutputNumber', name: 'mumber1', format: 'decimal', label: 'Basic' },
  { $formkit: 'formOutputNumber', name: 'number2', label: 'Icon Left', iconPrefix: 'oi oi-check' },
  { $formkit: 'formOutputNumber', name: 'number3', format: 'currency', label: 'Icon Right', help: 'Right Icon Demo', iconSuffix: 'oi oi-check' },
]
const data = { mumber1: 12.2, number2: 42.0, number3: 20000 }
</script>

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

Props ​

NameTypeDescription
formatstringNumber format (decimal, currency, etc.)
iconPrefixstringIcon for prefix
iconSuffixstringIcon for suffix
prefixstringPrefix text
suffixstringSuffix text
......See FormOutputNumber source for all props

See FormOutputNumber source for more details.

FormKit OpenVue Module