Skip to content

PrimeToggleButton

A FormKit wrapper for PrimeVue's ToggleButton component.

Live Example on Website

Usage

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

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeToggleButton', label: 'ToggleButton', name: 'toggleButton' },
  { $formkit: 'primeToggleButton', label: 'Second ToggleButton', name: 'toggleButtonRight', iconPos: 'right' },
  { $formkit: 'primeToggleButton', label: 'Custom ToggleButton', name: 'toggleButtonCustom', iconPos: 'right', onIcon: 'pi pi-plus', offIcon: 'pi pi-minus', onLabel: 'plus', offLabel: 'minus' },
]
const data = {}
</script>

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

Props

NameTypeDescription
ptobjectPass-through options
ptOptionsobjectPass-through options
unstyledbooleanDisable default styles
onLabelstringLabel for ON state
offLabelstringLabel for OFF state
onIconstringIcon for ON state
offIconstringIcon for OFF state
iconPosstringIcon position
sizestringInput size

See PrimeVue ToggleButton docs for more details.

FormKit PrimeVue Module