Skip to content

PrimeToggleSwitch

A FormKit wrapper for PrimeVue's ToggleSwitch component.

Live Example on Website

Usage

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

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeToggleSwitch', id: 'basic', name: 'basic', label: 'Basic' },
  { $formkit: 'primeToggleSwitch', name: 'eu_citizen', id: 'eu', suffix: 'Are you a european citizen: ' },
  { $formkit: 'primeToggleSwitch', name: 'confirmation', id: 'confirm', prefix: 'Are you sure ?', wrapperClass: 'flex items-center' },
  { $formkit: 'primeToggleSwitch', name: 'readonly', label: 'readonly', readonly: true },
  { $formkit: 'primeToggleSwitch', name: 'custom', label: 'custom values', trueValue: 'A', falseValue: 'B' },
]
const data = { readonly: true }
</script>

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

Props

NameTypeDescription
trueValueanyValue for ON state
falseValueanyValue for OFF state
ptobjectPass-through options
ptOptionsobjectPass-through options
unstyledbooleanDisable default styles

See PrimeVue ToggleSwitch docs for more details.

FormKit PrimeVue Module