Components
ColorPicker
Controlled hex color input with a preset palette and a native color field.
ColorPicker is a controlled color input: value is a hex string and
onChange is called with the new hex. It opens a popover showing quick-select
swatches plus a native color field for arbitrary values. Override the swatches
with presets (a default palette is used otherwise) and add a label above the
field.
Example
Preview
Accent
Brand
import { ColorPicker } from '@officina/ui';
import { useState } from 'react';
function AccentPicker() {
const [color, setColor] = useState('#6366f1');
return (
<ColorPicker
label="Accent"
value={color}
onChange={setColor}
presets={['#6366f1', '#0ea5e9', '#16a34a', '#e11d48']}
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange* | (hex: string) => void | — | Called with the new hex value when the color changes. |
| value* | string | — | Selected color as a hex string (controlled). |
| disabled | boolean | — | |
| invalid | boolean | — | Marks the field invalid for validation styling and `aria-invalid`. |
| label | string | — | Field label shown above the picker. |
| name | string | — | Form field name, for native form submission / form libraries. |
| presets | string[] | [ '#6366f1', // indigo (default) '#7c3aed', // violet '#2563eb', // blue '#0891b2', // cyan '#059669', // emerald '#16a34a', // green '#d97706', // amber '#dc2626', // red '#db2777', // pink '#0f172a', // slate-near-black ] | Swatch presets shown for quick selection. Falls back to a default palette. |