Color Swatch Picker — cinder playground

Overview

Presents a fixed palette of color swatches for constrained color selection.

<script lang="ts">
  import ColorSwatchPicker from '@lostgradient/cinder/color-swatch-picker';
</script>

<ColorSwatchPicker />

Live preview

Use when

Avoid when

Letting users author arbitrary colors across the spectrum — use color-picker instead.

Keyboard-navigable preset palette constrained to brand colors.

Props for color-swatch-picker
Name	Type	Default	Required	Bindable	Description
`value`	`text`	`''`		bind	Bindable selected color.
`colors`	`ColorSwatch[]`		req		Palette to render.
`shape`	`'circle' \| 'square'`	`'circle'`			Visual shape of each swatch. Default `'circle'`.
`size`	`'xs'\|'sm'\|'md'\|'lg'\|'xl'`	`'md'`			Swatch dimension token. Default `'md'`.
`layout`	`'grid' \| 'stack'`	`'grid'`			Layout direction. Default `'grid'`. Note: grid layout uses one-dimensional DOM-order navigation for both ArrowLeft/Right and ArrowUp/Down. True column-aware navigation is not implemented in v1 — see a11y memo.
`disabled`	`boolean`	`false`			Disables the entire listbox. Keyboard activation and clicks are ignored.
`label`	`text`		req		Accessible name for the listbox. Required — `role="listbox"` needs a label so screen readers can announce the control's purpose.
`onchange`	`(color: string) => void`				Fired when the selected swatch changes.
`indicator`	`snippet`				Snippet that replaces the default check-icon indicator on the selected swatch. Receives the active swatch and the computed contrast color for the icon.