Color Swatch Picker

A component that allows users to select from a set of predefined colors, often used for themes or branding.

Alpha

<script setup lang="ts">
import { ColorSwatchPickerItem, ColorSwatchPickerItemIndicator, ColorSwatchPickerItemSwatch, ColorSwatchPickerRoot } from 'akar';
import './styles.css';

// Step 9 of the Radix scales the other demos use (`../_colors`)
const colors = [
  '#e5484d', // red
  '#d6409f', // pink
  '#6e56cf', // violet
  '#0090ff', // blue
  '#30a46c', // green
  '#f76b15', // orange
  '#ffe629', // yellow
];
</script>

<template>
  <div class="akar-demo akar-demo-ColorSwatchPicker">
    <ColorSwatchPickerRoot class="root">
      <ColorSwatchPickerItem
        v-for="color in colors"
        :key="color"
        :value="color"
        class="item"
      >
        <ColorSwatchPickerItemSwatch
          class="swatch"
        />
        <ColorSwatchPickerItemIndicator class="indicator">
          <PIcon name="i-lucide-check" />
        </ColorSwatchPickerItemIndicator>
      </ColorSwatchPickerItem>
    </ColorSwatchPickerRoot>
  </div>
</template>

@scope (.akar-demo-ColorSwatchPicker) {
  .root {
    display: flex;
    gap: 8px;
  }

  .item {
    position: relative;
  }

  .swatch {
    height: 32px;
    width: 32px;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    cursor: pointer;
  }

  .dark .swatch {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  }

  .indicator {
    position: absolute;
    bottom: 4px;
    right: 4px;
    color: white;
  }

  .swatch[data-color-contrast='dark'] ~ .indicator {
    color: black;
  }
}

Features

Can be controlled or uncontrolled.
Focus is fully managed.
Full keyboard navigation.
Supports Right to Left direction.
Different selection behavior.

Installation

Install the component from your command line.

pnpm add akar

yarn add akar

npm install akar

bun add akar

Looking for a complete color picker? Check out the Color Picker example that combines Color Area, Color Slider, Color Field, and Color Swatch components.

Anatomy

Import all parts and piece them together.

<script setup>
import {
  ColorSwatchPickerItem,
  ColorSwatchPickerItemIndicator,
  ColorSwatchPickerItemSwatch,
  ColorSwatchPickerRoot,
} from 'akar';
</script>

<template>
  <ColorSwatchPickerRoot>
    <ColorSwatchPickerItem value="#ff0000">
      <ColorSwatchPickerItemSwatch />
      <ColorSwatchPickerItemIndicator />
    </ColorSwatchPickerItem>
    <ColorSwatchPickerItem value="#00ff00">
      <ColorSwatchPickerItemSwatch />
      <ColorSwatchPickerItemIndicator />
    </ColorSwatchPickerItem>
    <ColorSwatchPickerItem value="#0000ff">
      <ColorSwatchPickerItemSwatch />
      <ColorSwatchPickerItemIndicator />
    </ColorSwatchPickerItem>
  </ColorSwatchPickerRoot>
</template>

API Reference

ColorSwatchPickerRoot

The main component that displays a color swatch picker.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`string \| string[]` The value of the listbox when initially rendered. Use when you do not need to control the state of the Listbox
`dir`	`"ltr"`	`"ltr" \| "rtl"` The reading direction of the listbox when applicable. If omitted, inherits globally from `ConfigProvider` or assumes LTR (left-to-right) reading mode.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with listbox
`highlightOnHover`		`boolean` When `true`, hover over item will trigger highlight
`modelValue`		`string \| string[]` The controlled value of the listbox. Can be binded with `v-model`.
`multiple`		`boolean` Whether multiple options can be selected or not.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`orientation`	`"horizontal"`	`"vertical" \| "horizontal"` The orientation of the listbox. Mainly so arrow navigation is done accordingly (left & right vs. up & down)
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`selectionBehavior`	`'toggle'`	`"replace" \| "toggle"` How multiple selection should behave in the collection.

Event	Payload
`entryFocus`	`event: CustomEvent<any>` Event handler called when container is being focused. Can be prevented.
`highlight`	`payload: { ref: HTMLElement; value: AcceptableValue; }` Event handler when highlighted element changes.
`leave`	`event: Event` Event handler called when the mouse leave the container
`update:modelValue`	`value: AcceptableValue` Event handler called when the value changes.

Slot (default)	Payload
`modelValue`	`string \| string[]`

ColorSwatchPickerRoot.vue source

ColorSwatchPickerItem

The item that represents a selectable color swatch.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`disabled`		`boolean` When `true`, prevents the user from interacting with the item.
`value*`		`string` The color to display in the swatch as a hex string. Example: `#16a372` or `#ff5733`.

Event	Payload
`select`	`event: SelectEvent<AcceptableValue>` Event handler called when the selecting item. It can be prevented by calling `event.preventDefault`.

Slot (default)	Payload
`selected`	`boolean` Whether the item is currently selected

ColorSwatchPickerItem.vue source

ColorSwatchPickerItemSwatch

The component that displays the color swatch within an item.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`label`		`string` Optional accessible label for the color. If omitted, the color name will be derived from the color value.

ColorSwatchPickerItemSwatch.vue source

ColorSwatchPickerItemIndicator

The component that indicates the selected color swatch within an item.

Prop	Default	Type
`as`	`"div"`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`forceMount`		`boolean` Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.

ColorSwatchPickerItemIndicator.vue source

Color Swatch

A predefined color block that allows users to quickly select commonly used or brand-specific colors.

Combobox

Choose from a list of suggested values with full keyboard support.