FormOutputNumber

A FormKit wrapper for OpenVue's OutputNumber component.

Live Example on Website

Usage

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

Object-based Example

<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

Name	Type	Description
format	string	Number format (decimal, currency, etc.)
iconPrefix	string	Icon for prefix
iconSuffix	string	Icon for suffix
prefix	string	Prefix text
suffix	string	Suffix text
...	...	See FormOutputNumber source for all props

See FormOutputNumber source for more details.