Skip to content

PrimeOutputBoolean

A FormKit wrapper for PrimeVue's OutputBoolean component.

Live Example on Website

Usage

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

Object-based Example

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

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

Props

NameTypeDescription
trueValueanyValue for true state
falseValueanyValue for false state
prefixstringPrefix text
suffixstringSuffix text
iconPrefixstringIcon for prefix
iconSuffixstringIcon for suffix

See PrimeOutputBoolean source for more details.

FormKit PrimeVue Module