Color Picker Component

The Color Picker component provides an intuitive interface for color selection with support for multiple color formats, eyedropper functionality, and color history. Built with accessibility and user experience in mind, it offers rich functionality including format switching, opacity control, and keyboard navigation.

Key Features

• Multiple Color Formats: Support for HEX, RGB, RGBA, HSL, and HSLA

• Eyedropper Tool: Pick colors from anywhere on screen

• Color History: Track and reuse recently selected colors

• Keyboard Navigation: Full keyboard support with intuitive controls

• Accessibility: ARIA compliance and screen reader support

Basic Usage

1
<ColorPicker label="Choose a color" />

Size Variants

The color picker supports different size variants through the size prop.

1
<ColorPicker size="sm" />
2
<ColorPicker size="default" />
3
<ColorPicker size="lg" />

Color Picker Panel Directly on the page

1
<ColorPickerPanel isModal={false} />

Required Field

Add the required prop to mark the color picker as a required field.

1
<ColorPicker required label="Required Color" />

Initial Value

Set an initial color using the value prop.

1
<ColorPicker value="#ff00FF1e" />

Custom Event Listeners

You can listen to the change custom event emitted by the color picker component:

Waiting for events to be emitted… (Click on the color picker to see the events)

1
CustomEvent<{
2
  id?: string; // id of the color picker
3
  name?: string; // name of the hidden input
4
  color: string; // selected color in current format
5
  format: 'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla'; // current color format
6
}>;

Color Picker Props API

Error State

The color picker component supports an error state. Set the data-state attribute to error to indicate validation errors.

1
<ColorPicker data-state="error" />

Keyboard Navigation