ColorField

ColorField displays a colored square button (or an empty "tap to select" placeholder when no color is chosen). Clicking it opens a popover palette with:

• A grid of 10 base colors × 5 shade levels
• Complementary neutral tones
• Semantic theme colors (primary, danger, warning, success, info)
• A free-form hex input for arbitrary colors

Clicking the color swatch when a color is already selected clears it.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Current color value (CSS hex string or theme color name). | | onChange | (color?: string \| null) => void | Yes | — | Called with the new color string, or null when cleared. | | label | string | No | — | Label rendered above the field. | | description | string | No | — | Helper text rendered below the field. | | disablePrimary | boolean | No | — | When true, the "primary" semantic color swatch is disabled and cannot be selected. | | containerStyle | React.CSSProperties | No | — | Styles applied to the outer FieldContainer. | | headerStyle | React.CSSProperties | No | — | Styles applied to the field header area. | | bodyStyle | React.CSSProperties | No | — | Styles applied to the field body area. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the outer container. | | id | string | No | — | id attribute forwarded to the container. |

Usage

Basic

import React, { useState } from 'react';
import ColorField from '@/components/fields/ColorField';

export default function Example() {
  const [color, setColor] = useState('');

  return (
    <ColorField
      label="Brand color"
      value={color}
      onChange={(c) => setColor(c ?? '')}
    />
  );
}

Disabling primary color selection

<ColorField
  label="Accent color"
  value={accentColor}
  onChange={(c) => setAccentColor(c ?? '')}
  disablePrimary={true}
  description="Select any color except primary."
/>