ColorPickerField

A dual-input color picker that syncs a native <input type="color"> with a hex text field. Accepts and emits hex values without the # prefix.

Basic Usage

Demo

Brand Color

Value: #3b82f6

<script setup>
import { ref } from 'vue'
import { ColorPickerField } from 'praxis-vue-ui'

const color = ref('3b82f6')
</script>

<template>
  <ColorPickerField
    v-model="color"
    label="Brand Color"
  />
  <p>Value: #{{ color }}</p>
</template>

Required Field

Required

Primary Color *

<ColorPickerField
  v-model="color"
  label="Primary Color"
  :required="true"
/>

Disabled State

Disabled

Read-only Color

<ColorPickerField
  v-model="color"
  label="Read-only Color"
  :disabled="true"
/>

Props

Props

Prop	Type	Default	Description
modelValue	string	''	Hex color value without the # prefix (e.g. '3b82f6'). Use with v-model.
label	string	''	Label text displayed above the input.
required	boolean	false	Marks the field as required. Adds a red asterisk to the label.
disabled	boolean	false	Disables both the color picker and the text input.
placeholder	string	'000000'	Placeholder text for the hex input field.
error	string	''	Error message displayed below the input in red.

Emits

Emits

Event	Payload	Description
update:modelValue	string	Emitted on every color change. Value is a 6-character hex string without #.

Notes

• Accepts input with or without # — normalizes internally.
• The text input only allows hex characters (0-9, a-f, A-F) and caps at 6 characters.
• The color picker swatch and text input are kept in sync bidirectionally.