Skip to content

PrimeOutputText

A FormKit wrapper for PrimeVue's OutputText component.

Live Example on Website

Usage

vue
<FormKit type="primeoutputtext" v-model="text" />

Object-based Example

vue
<script setup>
function prefixClicked() {
  console.error('Prefix Icon Clicked')
}
function suffixClicked() {
  console.error('Suffix Icon Clicked')
}
const schema = [
  { $formkit: 'primeOutputText', name: 'name', label: 'Basic' },
  { $formkit: 'primeOutputText', name: 'toTranslate', isTranslationKey: true, label: 'Translated' },
  { $formkit: 'primeOutputText', name: 'html', label: 'HTML as Text (Default)' },
  { $formkit: 'primeOutputText', name: 'html', html: true, label: 'HTML Output (v-html)', help: 'Only use on trusted content or sanitize after input !' },
  { $formkit: 'primeOutputText', id: 'icon', name: 'iconLeft', label: 'Icon Left', iconPrefix: 'pi pi-check', onIconPrefixClicked: prefixClicked },
  { $formkit: 'primeOutputText', name: 'iconRight', label: 'Icon Right', iconSuffix: 'pi pi-check text-yellow-500', onIconSuffixClicked: suffixClicked },
]
const data = { name: 'Harry Potter', toTranslate: 'sample', iconLeft: 'Some Text ...', iconRight: 'Another Text ...', html: '<b style="color: gold">Bold Hello World</b>' }
</script>

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

Props

NameTypeDescription
htmlbooleanRender as HTML (v-html)
isTranslationKeybooleanUse i18n translation
iconPrefixstringIcon for prefix
iconSuffixstringIcon for suffix
prefixstringPrefix text
suffixstringSuffix text
......See PrimeOutputText source for all props

See PrimeOutputText source for more details.

FormKit PrimeVue Module