ColorPickerRoot

ColorPickerRoot is a headless popover-based color picker primitive.

It provides:

• a trigger slot with swatch background styling
• a default trigger fallback
• a content slot with color and update()

Props

Prop	Default	Type
color* Current color value.	—	Color
contentClass Optional class for the popover content.	—	string | undefined
swatchClass Optional class for the default trigger button.	—	string | undefined

Events

Event	Payload	Description
update	color: Color	Emitted when the color changes.

Slots

Slot	Props	Description
trigger	{ style: Record<string, string> }	Custom trigger with swatch background style.
default	{ color: Color, update: (color: Color) => void }	Main color editor content.

Example

<ColorPickerRoot :color="color" @update="color = $event">
  <template #trigger="{ style }">
    <button class="size-6 rounded border" :style="style" />
  </template>

  <template #default="{ color, update }">
    <MyColorEditor :color="color" @change="update" />
  </template>
</ColorPickerRoot>

Related APIs

• ColorInputRoot