---
title: "Color Swatch Picker"
description: "A component that allows users to select from a set of predefined colors, often used for themes or branding."
canonical_url: "https://vinicunca.dev/akar/components/color-swatch-picker"
---
# Color Swatch Picker

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

`````vue [index.vue]
<script setup lang="ts">
import {
  blue,
  green,
  orange,
  pink,
  red,
  violet,
  yellow,
} from '@radix-ui/colors'
import { ColorSwatchPickerItem, ColorSwatchPickerItemIndicator, ColorSwatchPickerItemSwatch, ColorSwatchPickerRoot } from 'akar'
import './styles.css'

const colors = [
  red.red9,
  pink.pink9,
  violet.violet9,
  blue.blue9,
  green.green9,
  orange.orange9,
  yellow.yellow9,
]
</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>
```

```css [styles.css]
@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.

```bash [pnpm]
pnpm add akar
```

```bash [yarn]
yarn add akar
```

```bash [npm]
npm install akar
```

```bash [bun]
bun add akar
```

> [!TIP]
> 
> Looking for a complete color picker? Check out the [Color Picker example](https://vinicunca.dev/examples/color-picker) that combines Color Area, Color Slider, Color Field, and Color Swatch components.

## Anatomy

Import all parts and piece them together.

```vue
<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.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](/akar/guides/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.<br><br>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.<br><br>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. |

**Events**

| Event | Payload | Description |
| --- | --- | --- |
| `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. |

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `modelValue` | `string \| string[]` |  |

[ColorSwatchPickerRoot.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSwatchPicker/ColorSwatchPickerRoot.vue)

### ColorSwatchPickerItem

The item that represents a selectable color swatch.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](/akar/guides/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.<br>Example: `#16a372` or `#ff5733`. |

**Events**

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

**Slots**

| Slot | Payload | Description |
| --- | --- | --- |
| `selected` | `boolean` | Whether the item is currently selected |

[ColorSwatchPickerItem.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSwatchPicker/ColorSwatchPickerItem.vue)

### ColorSwatchPickerItemSwatch

The component that displays the color swatch within an item.

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](/akar/guides/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](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSwatchPicker/ColorSwatchPickerItemSwatch.vue)

### ColorSwatchPickerItemIndicator

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

**Props**

| Prop | Default | Type | Description |
| --- | --- | --- | --- |
| `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.<br><br>Read our [Composition](/akar/guides/composition) guide for more details. |
| `forceMount` |  | `boolean` | Used to force mounting when more control is needed. Useful when<br>controlling animation with Vue animation libraries. |

[ColorSwatchPickerItemIndicator.vue source](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSwatchPicker/ColorSwatchPickerItemIndicator.vue)

---

- [GitHub](https://github.com/vinicunca/akar/blob/v2.0.20/packages/core/src/ColorSwatchPicker)
- [npm](https://www.npmjs.com/package/akar)


## Sitemap

See the full [sitemap](https://vinicunca.dev/sitemap.md) for all pages.