ColorPicker

Import

import { ColorPicker } from '@tac-ui/web';

Default

The base picker renders a trigger button showing the selected color swatch. Opening the dropdown reveals the full spectrum picker, preset swatches, hex input, and channel inputs.

<ColorPicker placeholder="Select color" />

With Label

Use <code>label</code> to render an associated label above the trigger and <code>helperText</code> to display a hint below when there is no active error.

<ColorPicker label="Background Color" helperText="Choose a background color for the card." />

Custom Colors

Pass a <code>colors</code> array of hex strings to replace the 30-color default preset grid with a custom palette. The grid always uses 6 columns.

<ColorPicker
  label="Grayscale"
  colors={['#0F172A', '#1E293B', '#334155', '#475569', '#64748B', '#94A3B8', '#CBD5E1', '#E2E8F0', '#F1F5F9', '#F8FAFC', '#FFFFFF', '#000000']}
/>

Without Spectrum

Set <code>showSpectrum={false}</code> to hide the saturation/brightness canvas and hue slider, leaving only the swatch grid and hex input.

<ColorPicker label="Simple Mode" showSpectrum={false} />

Without Channels

Set <code>showChannels={false}</code> to hide the RGB and HSB numeric input rows for a more compact panel layout.

<ColorPicker label="No Channels" showChannels={false} />

Swatches Only

Combine <code>showSpectrum={false}</code>, <code>showChannels={false}</code>, and <code>showEyeDropper={false}</code> to create a minimal swatch-only picker panel.

<ColorPicker label="Swatches Only" showSpectrum={false} showChannels={false} showEyeDropper={false} />

Without Input

Set <code>showInput={false}</code> to hide the hex text input and eyedropper row below the presets.

<ColorPicker label="Quick Pick" showInput={false} showChannels={false} />

Error State

Set <code>error</code> to apply destructive border styling to the trigger and pass <code>errorMessage</code> to display a validation message below it.

<ColorPicker label="Theme Color" error errorMessage="Please select a color." />

Disabled

When <code>disabled</code> is true the trigger is non-interactive and the picker panel will not open.

<ColorPicker placeholder="Disabled" disabled />

Controlled

Use <code>value</code> and <code>onChange</code> for controlled usage. The <code>onChange</code> callback fires only when the Select button is pressed, making color changes explicit.

const [color, setColor] = useState('#3B82F6');
<ColorPicker label="Brand Color" value={color} onChange={setColor} />

API Reference