Marble UI
← Components

Color Swatch Picker

Preview: Circle

Grid of preset colors with arrow-key navigation; selection shows as a ring.

Import

import { ColorSwatchPicker } from '@marbleui/ui'

Props

<ColorSwatchPicker>

PropTypeDefaultDescription
colors *requiredstring[]—
shape'circle' | 'square''circle'
size'sm' | 'md' | 'lg''md'

Also accepts React Aria props (81).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria ColorSwatchPicker · React Aria ColorSwatchPickerItem. Follow the primitive's docs for the full keyboard map.

Usage notes

Grid of preset colors where one is selected. For arbitrary colors use ColorPicker; for a single preview use ColorSwatch.

<ColorSwatchPicker
  aria-label="Label color"
  colors={['#ef4444', '#22c55e', '#3b82f6']}
  defaultValue="#3b82f6"
  onChange={setColor}
/>
  • colors is an array of color strings. Uncontrolled: defaultValue. Controlled: value + onChange (a Color).
  • Arrow keys move between swatches; the selected one gets a ring.
  • shape is circle (default) or square; size is sm, md or lg.
  • Pass aria-label, since there is no visible label.
Example source · show
import { ColorSwatchPicker } from './color-swatch-picker'

const brand = ['#0f172a', '#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#3b82f6', '#8b5cf6', '#ec4899']

export const styles = {
  Circle: () => <ColorSwatchPicker aria-label="Label color" colors={brand} defaultValue="#3b82f6" />,
  Square: () => <ColorSwatchPicker aria-label="Theme accent" colors={brand.slice(1, 7)} shape="square" size="lg" defaultValue="#22c55e" />,
}

Source: packages/ui/src/color-swatch-picker/color-swatch-picker.tsx

Catalog

Category
color
Priority
Core
Primitive
react-aria
React Aria
ColorSwatchPicker