Skip to content

PrimeColorPicker

A FormKit wrapper for PrimeVue's ColorPicker component.

Live Example on Website

Usage

vue
<FormKit type="primecolorpicker" v-model="color" />

Object-based Example

vue
<script setup>
const schema = [
  { $formkit: 'primeColorPicker', label: 'Select Color', name: 'color' },
  { $formkit: 'primeColorPicker', name: 'styled', label: 'Styled + Disabled', style: { background: 'gray' }, class: 'customClass', disabled: true },
  { $formkit: 'primeColorPicker', name: 'inline', label: 'Inline - Format RGB', inline: true, format: 'rgb' },
]
const data = {}
</script>

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

Props

NameTypeDescription
defaultColorstringDefault color
inlinebooleanInline display
formatstringColor format
ptobjectPass-through options
ptOptionsobjectPass-through options
unstyledbooleanDisable default styles

See PrimeVue ColorPicker docs for more details.

FormKit PrimeVue Module