Skip to content

PrimeRating

A FormKit wrapper for PrimeVue's Rating component.

Live Example on Website

Usage

vue
<FormKit type="primerating" v-model="rating" />

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeRating', label: 'Select Rating', name: 'rating' },
  { $formkit: 'primeRating', label: 'Select Rating', name: 'ratingDisabled', value: 3, disabled: true },
  { $formkit: 'primeRating', label: 'Select Rating', name: 'ratingCancel', value: 7, stars: 10, cancel: true },
]
const data = {}
</script>

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

Props

NameTypeDescription
starsnumberNumber of stars
cancelbooleanShow cancel icon
onIconstringIcon for selected star
offIconstringIcon for unselected star
cancelIconstringIcon for cancel
ptobjectPass-through options
ptOptionsobjectPass-through options
unstyledbooleanDisable default styles

See PrimeVue Rating docs for more details.

FormKit PrimeVue Module