ColorPicker

molecules

Per-event brand color picker (sets CSS custom properties). Replaces legacy color-picker.xsl.

ARIA Role: group

Demo

Demo for ColorPicker (molecules)

Per-event brand color picker (sets CSS custom properties). Replaces legacy color-picker.xsl.

Props

Prop	Type	Required	Default	Description
`value`	`string`	No	`—`	Selected color (hex)
`onChange`	`(color: string) => void`	Yes	`—`	Color change handler
`disabled`	`boolean`	No	`false`	Disabled state
`label`	`string`	No	`—`	Field label
`presetColors`	`string[]`	No	`—`	Preset color swatches

TypeScript Interface

interface ColorPickerProps {
  value?: string;
  onChange: (color: string) => void;
  disabled?: boolean;
  label?: string;
  presetColors?: string[];
}

Assertions (NASA Rule 5)

[aria]Color swatches must have aria-label with color name(WCAG 1.1.1)
[aria]Provide aria-valuenow, valuemin, valuemax, valuetext(WCAG 1.3.1)
[keyboard]Arrow keys, Enter, and Escape must be supported(WCAG 2.1.1)
[validation]Hex format: /^#[0-9A-Fa-f]{6}$/(NASA Rule 5)

Usage

Import

import { Colorpicker } from '@epasslive/design-system'

Basic

<Colorpicker />

With Variants

<Colorpicker variant="primary" size="md" />