EditableColorField

EditableColorField displays the current color as an 80×80 swatch in both read and edit modes. Clicking the edit icon enables the swatch; tapping on it opens a popover palette with 10 base colors × 5 shade levels, a complementary grayscale row, 5 semantic colors (primary, danger, warning, success, info), and a custom hex input. Clicking the swatch when a color is already selected clears it. On save the color value (hex or semantic name) is persisted via API.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | name | string | Yes | — | Field name sent as the key in the update payload. | | value | string | Yes | "" | Current color value (hex string like "#0046BF" or a semantic name like "primary"). | | updatePath | string | Yes | — | API endpoint path used to persist the change. | | label | string | No | — | Label shown above the swatch. | | description | string | No | — | Helper text shown below the label. | | disablePrimary | boolean | No | — | When true, the primary semantic color option is disabled and cannot be selected. | | apiBaseUrl | string | No | — | Base URL prepended to updatePath. | | useAuthToken | boolean | No | false | When true, the request includes the authorization token. | | onChange | (newValue?: string \| null) => void | No | — | Called locally whenever the color changes (before save). | | onEditStart | () => void | No | — | Called when edit mode begins. | | onEditSuccess | (updatedValue: string, newFormData: any) => void | No | — | Called after successful save. | | onEditError | (error: any) => void | No | — | Called on API error; value is reverted. | | onEditCancel | () => void | No | — | Called when the user cancels; value is reverted. | | editIcon | string | No | "pencil" | Icon name for the edit button. | | saveIcon | string | No | "check" | Icon name for the save button. | | cancelIcon | string | No | "close" | Icon name for the cancel button. | | containerStyle | React.CSSProperties | No | — | Style for the outermost wrapper. | | inputStyle | React.CSSProperties | No | — | Style for the inner input element. | | labelStyle | React.CSSProperties | No | — | Style for the <label> element. | | descriptionStyle | React.CSSProperties | No | — | Style for the description <p> element. | | headerStyle | React.CSSProperties | No | — | Style passed to the FieldContainer header. | | bodyStyle | React.CSSProperties | No | — | Style for the body section wrapping the swatch. |

Usage

Basic

import React, { useState } from 'react';
import EditableColorField from '@/components/editable-fields/EditableColorField';

export default function Example() {
  const [brandColor, setBrandColor] = useState('#0046BF');

  return (
    <EditableColorField
      label="Brand Color"
      name="brand_color"
      value={brandColor}
      updatePath="/v1/organizations/3"
      apiBaseUrl="https://api.example.com"
      useAuthToken
      onEditSuccess={(updated) => setBrandColor(updated)}
    />
  );
}

Disabling the primary semantic option

<EditableColorField
  label="Accent Color"
  name="accent_color"
  value={accentColor}
  disablePrimary
  updatePath="/v1/organizations/3"
  apiBaseUrl="https://api.example.com"
  useAuthToken
  onEditSuccess={(updated) => setAccentColor(updated)}
/>