Color Swatch Picker

#Anatomy

• #item: Replace content inside each option. Receives item, option, color, value, label, isSelected, isHighlighted, isDisabled, and select.
• #indicator: Custom selection indicator. Receives the same props as #item.
• #empty: Content for an empty palette.

#Usage

<script setup lang="ts">
import { ColorArea, ColorPicker, ColorSlider } from "akaza-ui";
import { ref } from "vue";
const color = ref("#56d799");
const areaUi = {
  root: "aspect-square w-full rounded-lg data-[akaza-focused]:ring-2 data-[akaza-focused]:ring-ring",
  area: "rounded-lg",
  thumb: "size-5 rounded-full border-2 border-neutral-400 bg-white shadow-sm",
};
const sliderUi = {
  root: "h-6 w-full rounded-md data-[akaza-disabled]:opacity-50",
  axis: "peer outline-none",
  track: "h-3 w-full rounded-full bg-muted",
  thumb:
    "size-6 rounded-full border-2 border-neutral-400 bg-white shadow-sm peer-data-[akaza-focus-visible]:ring-2 peer-data-[akaza-focus-visible]:ring-ring peer-data-[akaza-focus-visible]:ring-offset-2 peer-data-[akaza-focus-visible]:ring-offset-background",
};
</script>

<template>
  <div class="grid gap-4">
    <output class="text-sm text-muted-foreground">Current: {{ color }}</output>
    <ColorPicker
      v-model="color"
      :ui="{ root: 'grid w-full max-w-64 gap-3' }"
      aria-label="Brand color controls"
    >
      <ColorArea
        color-space="hsl"
        x-channel="hue"
        y-channel="saturation"
        :ui="areaUi"
        aria-label="Brand area"
      />
      <label class="grid gap-1 text-xs text-muted-foreground">
        Lightness
        <ColorSlider
          channel="lightness"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Lightness"
        />
      </label>
      <label class="grid gap-1 text-xs text-muted-foreground">
        Opacity
        <ColorSlider
          channel="alpha"
          color-space="hsl"
          :ui="sliderUi"
          aria-label="Opacity"
        />
      </label>
    </ColorPicker>
  </div>
</template>

#Examples

#Single selection

Use #indicator to add a checkmark to the selected color. The labels remain available to screen readers.

<Dialog
  :ui="{
    overlay: 'fixed inset-0 bg-black/50 backdrop-blur-sm',
    content: 'bg-white rounded-xl shadow-xl w-full max-w-md',
    header: 'flex items-center justify-between p-6 border-b',
    body: 'p-6',
    footer: 'flex justify-end gap-2 p-6 border-t',
  }"
>

#Multiple selection and RTL

Toggle several colors, use Shift with navigation to extend selection, and skip disabled options.

import './main.css'

#Custom item slot

Replace the swatch, label, and indicator. The option wrapper still handles selection and focus.

<template>
  <Accordion
    :items="items"
    type="multiple"
  />
</template>

See the live demo's code for the state and style objects used in these examples.

#Formats

Set format to choose the returned color string. It does not change the palette. See supported formats. Changing the format keeps opacity and emits value-change with reason format.

HEX and RGB can lose colors outside sRGB. The picker keeps the original preset colors when you change format. CSS variables, currentColor, and relative color expressions are not supported. See precision and gamut for details.

#Behavior

The picker uses Listbox for selection, keyboard navigation, and form submission. It compares colors by value, so red and #ff0000 match. Invalid colors are disabled. Duplicate colors can both appear selected; use unique colors if you need separate options.

Pass color strings or objects with { value: string; label?: string; disabled?: boolean }. Multiple selections submit one value per color under the same form name. The #item slot replaces the option content, not its wrapper.

#API Reference

#Props

#Emits

#Slots

• #item: Replace content inside each option. Receives item, option, color, value, label, isSelected, isHighlighted, isDisabled, and select.
• #indicator: Custom selection indicator. Receives the same props as #item.
• #empty: Content for an empty palette.

#UI Options

#Styling Hooks

The root exposes data-akaza-state="selected|empty". It also sets data-akaza-disabled, data-akaza-readonly, data-akaza-invalid, data-akaza-focused, and data-akaza-filled when true. Each item has its own selection and highlight attributes. The picker does not expose data-akaza-out-of-gamut.

Use class or ui.root to style the root. Use the other ui keys for inner parts. Set sizes, borders, and colors in your own styles.

#Keyboard

#Parity Notes

Like Reka's color swatch picker, this component supports single and multiple selection, keyboard navigation, RTL, and disabled options. Customize its items through slots. The supplied Base UI reference has no color swatch picker component.