Skip to main content

ColorPicker()

ColorPicker(items): Element

A color picker component that renders a grid of color swatches for selection.

This component provides a simple interface for users to select from a predefined set of colors. It renders each color as an interactive swatch that can be clicked to select that color. The component supports keyboard navigation, accessibility features, and fine-grained styling control through the classNames prop.

Parameters​

items​

ColorPickerProps

Array of color values to display as selectable swatches

Returns​

Element

Example​

const colors = [
  '#ff0000',
  '#00ff00',
  '#0000ff',
];

<ColorPicker
  options={colors}
  value={'#ff0000'}
  onChange={(color) => console.log('Selected:', color)}
  classNames={{
    picker: 'gap-4',
    item: 'rounded-lg',
    swatch: 'w-8 h-8'
  }}
/>

Remarks​

  • Colors can be provided as Color objects or color strings
  • The component automatically handles color parsing and validation
  • Supports all accessibility features from react-aria-components
  • Uses a grid layout by default but can be customized via the layout prop