ColorPicker

A color selector with spectrum gradient picker, swatch grid, and channel inputs for precise color selection. Includes a confirm button for two-step picking.

Import

tsx

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

Default

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

tsx

<ColorPicker placeholder="Select color" />

With Label

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

Background Color

Choose a background color for the card.

tsx

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

Custom Colors

Pass a colors array of hex strings to replace the default preset grid with a custom palette.

Grayscale

tsx

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

Without Spectrum

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

Simple Mode

tsx

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

Without Channels

Set showChannels={false} to hide the RGB numeric input rows for a more compact panel layout.

No Channels

tsx

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

Swatches Only

Combine showSpectrum={false}, showChannels={false}, and showInput={false} to create a minimal swatch-only picker panel.

Swatches Only

tsx

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

Without Input

Set showInput={false} to hide the hex text input row below the presets.

Quick Pick

tsx

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

Error State

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

Theme Color

Please select a color.

tsx

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

Disabled

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

tsx

<ColorPicker placeholder="Disabled" disabled />

Controlled

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

Brand Color

tsx

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

API Reference

Prop	Type	Default	Description
value	string	-	Controlled selected color as a hex string.
onChange	(color: string) => void	-	Called when a color is confirmed via the Select button.
label	string	-	Label text displayed above the trigger.
placeholder	string	"Select color"	Placeholder text when no color is selected.
helperText	string	-	Helper text displayed below the trigger when there is no error.
colors	string[]	Default palette	Custom array of hex color strings for the swatch grid.
showInput	boolean	true	Shows a text input for manual hex entry.
showSpectrum	boolean	true	Shows the spectrum gradient picker for detailed color selection.
showChannels	boolean	true	Shows RGB channel inputs for precise values.
error	boolean	false	Applies error styling when true.
errorMessage	string	-	Error message displayed when error is true.
disabled	boolean	false	Disables the picker.
style	ViewStyle	-	Additional styles applied to the trigger container.