ColorPicker

Native colour input + swatches

The platform's colour picker in a square plate: click the well and the OS dialog opens; the library only frames it. The model is what <input type="color"> gives — a lowercase #rrggbb, no alpha (a platform limit). showValue prints the hex beside the well as an <output>; swatches add one-click presets with a pressed state — pass { value, label } so a screen reader hears "Megumi" rather than a hex.

Inside a BlessField the field's label names the input; label is for a picker with no visible label.

Basic

#e85078

<script setup lang="ts">
import { ref } from "vue";
import { BlessColorPicker } from "blessing-ui";
const color = ref("#e85078");
</script>

<template>
  <div class="col">
    <BlessColorPicker
      v-model="color"
      :swatches="[
        { value: '#e85078', label: 'Megumi' },
        { value: '#e03028', label: 'Utaha' },
        { value: '#4090d0', label: 'Izumi' },
        { value: '#b878b0', label: 'Michiru' },
        { value: '#c8e018', label: 'Eriri' },
        { value: '#3d3e3f', label: 'Ink' },
      ]"
      label="Accent"
    />
    <BlessColorPicker model-value="#82909a" :show-value="false" disabled label="Disabled" />
  </div>
</template>

Usage

import { BlessColorPicker } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
swatches	(string | { value: string; label: string; })[]	[]	preset swatches: hex, or { value, label } so a screen reader hears a name, not a hex
disabled	boolean	—
label	string	—	accessible name when there is no visible label (a BlessField's label is used otherwise)
showValue	boolean	true	show the hex next to the well
modelValue	string	"#e85078"

Events

Name	Payload	Description
update:modelValue	[value: string]