Passer au contenu principal

ColorPicker

Implemented

Per-event brand color picker — a controlled native color input with an optional preset palette row. Replaces legacy color-picker.xsl. API under revision: preset palette rendering and keyboard navigation are not yet implemented.

Categorymolecules
Sourcepatterns/molecules/colorpicker.html
AI HintControlled native color input with an optional preset row. API under revision — preset rendering and keyboard navigation are not implemented yet; verify against the rewrite before adopting.

ColorPicker component.

ColorPicker

design-system

ColorPicker component preview and API reference.

Props

Preview

ColorPicker

Prop
Type
Required
Default
Description
value
string
Optional
—

Selected color (hex)

onChange
(color: string) => void
Optional
—

Color change handler

disabled
boolean
Optional
false

Disabled state

label
string
Optional
—

Field label

presetColors
string[]
Optional
—

Preset color swatches

ariaLabel
string
Optional
—

Accessible name for the input and preset listbox; falls back to label, then 'Pick a color'.

className
string
Optional
—

Class appended to the root container.

id
string
Optional
—

Id for the native color input.

Quick use:<ColorPicker />

Accessibility

ARIA rolelistbox

a11y

1 rule

WCAG 2.5.5

Input swatch and preset buttons meet the 44x44 tap-target floor (var(--ep-tap-min))

ARIA

1 rule

WAI-ARIA Listbox Pattern

Presets render as role='listbox' with role='option' + aria-selected; preset aria-labels currently announce raw hex values

Usage

Import

tsxSnippet
import { ColorPicker } from "@epasslive/design-system"

Example 1

tsxSnippet
<ColorPicker value={color} onChange={setColor} ariaLabel="Brand color" />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules

Design System v4.1.0 | ePassLive