Color Swatch Picker

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

View code

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.

$ npm add reka-ui

Anatomy

Import all parts and piece them together.

vue

<script setup>
import {
  ColorSwatchPickerItem,
  ColorSwatchPickerItemIndicator,
  ColorSwatchPickerItemSwatch,
  ColorSwatchPickerRoot,
} from 'reka-ui'
</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'` How multiple selection should behave in the collection.

Emit	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 leaves the container
`update:modelValue`	`[value: AcceptableValue]` Event handler called when the value changes.

Slots (default)	Payload
`modelValue`	`string \| string[] \| undefined`

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

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

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.

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.

Color Swatch Picker ​

Features ​

Installation ​

Anatomy ​

API Reference ​

ColorSwatchPickerRoot ​

ColorSwatchPickerItem ​

ColorSwatchPickerItemSwatch ​

ColorSwatchPickerItemIndicator ​