Skip to content

FormColorPicker ​

A FormKit wrapper for OpenVue's ColorPicker component.

Live Example on Website

Usage ​

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

Object-based Example ​

vue
<script setup>
const schema = [
  { $formkit: 'formColorPicker', label: 'Select Color', name: 'color' },
  {
    $formkit: 'formColorPicker',
    name: 'styled',
    label: 'Styled + Disabled',
    style: { background: 'gray' },
    class: 'customClass',
    disabled: true
  },
  {
    $formkit: 'formColorPicker',
    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 OpenVue ColorPicker docs for more details.

FormKit OpenVue Module