FormOutputBoolean

A FormKit wrapper for OpenVue's OutputBoolean component.

Live Example on Website

Usage

<FormKit type="formOutputBoolean" v-model="value" />

Object-based Example

<script setup>
const schema = [
  { $formkit: 'formOutputBoolean', name: 'trueValue', label: 'Default' },
  { $formkit: 'formOutputBoolean', name: 'trueValue', prefix: 'Boolean Value:' },
  { $formkit: 'formOutputBoolean', name: 'falseValue', label: 'False Example' },
  {
    $formkit: 'formOutputBoolean',
    name: 'trueValue',
    label: 'True with custom Text',
    trueValue: 'Sure'
  },
  {
    $formkit: 'formOutputBoolean',
    name: 'falseValue',
    label: 'False with custom Text',
    falseValue: 'Never'
  },
  {
    $formkit: 'formOutputBoolean',
    name: 'trueValue',
    label: 'Conditional true - only Icon',
    if: '$trueValue',
    trueValue: '',
    iconSuffix: 'oi oi-check'
  },
  {
    $formkit: 'formOutputBoolean',
    name: 'falseValue',
    label: 'Conditional false - only Icon',
    if: '!$falseValue',
    falseValue: '',
    iconSuffix: 'oi oi-minus'
  },
]
const data = { trueValue: true, falseValue: false }
</script>

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

Props

Name	Type	Description
trueValue	any	Value for true state
falseValue	any	Value for false state
prefix	string	Prefix text
suffix	string	Suffix text
iconPrefix	string	Icon for prefix
iconSuffix	string	Icon for suffix

See FormOutputBoolean source for more details.