Skip to content

PrimeKnob

A FormKit wrapper for PrimeVue's Knob component.

Live Example on Website

Usage

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

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeKnob', name: 'knob', label: 'Use Knob', value: 50, validation: 'min:20|max:80' },
  { $formkit: 'primeKnob', name: 'custom', label: 'Customized Knob', min: 42, max: 98, step: 4, value: 58, showValue: false },
]
const data = {}
</script>

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

Props

NameTypeDescription
ptobjectPass-through options
ptOptionsobjectPass-through options
unstyledbooleanDisable default styles
minnumberMinimum value
maxnumberMaximum value
stepnumberStep increment
sizenumberKnob size
strokeWidthnumberStroke width
showValuebooleanShow value inside knob
valueColorstringValue color
rangeColorstringRange color
textColorstringText color
valueTemplatestringValue template

See PrimeVue Knob docs for more details.

FormKit PrimeVue Module