Color Select

Example

Usage

		<ColorSelect
	colors={[
		{ class: 'text-red-700', label: 'red' },
		{ class: 'text-green-700', label: 'green' },
		{ class: 'text-blue-700', label: 'blue' },
		{ class: 'text-yellow-700', label: 'yellow' }
	]}
/>

<!-- with custom colors -->
<ColorSelect
	colors={[
		{ value: '#ff0000', label: 'red' },
		{ value: '#00ff00', label: 'green' },
		{ value: '#0000ff', label: 'blue' },
		{ value: '#ffff00', label: 'yellow' }
	]}
/>

API Reference

ColorSelect

A group of color swatches that allows selecting a single color.

Property Type Description

colors required $bindable

array

The list of selectable colors. Can be simple strings or objects with custom class, label, and value.

selected $bindable

union

The currently selected color. Defaults to the first color. Default: —

name $bindable

string

The name attribute for the underlying radio inputs (auto-generated if not provided). Default: —

onselected

function

Callback invoked when the selected color changes. Default: —

colorsClass

string

Additional CSS classes for the color swatches container. Default: —

class

string

Additional CSS classes to apply to the root element. Default: —

ref $bindable

HTMLDivElement

The underlying DOM element. Default: —

Property

colors

selected

name

onselected

colorsClass

class

ref