ColorPaletteField

ColorPaletteField renders a colored bar button that opens a popover with a fixed palette of 13 pastel colors. On mount the first color in the palette is automatically selected. This component is suitable when you want to offer a curated, limited set of soft colors (e.g. for calendar event backgrounds or category badges).

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | Currently selected color (CSS hex string). | | onChange | (color: string) => void | Yes | — | Called with the selected hex color string. | | label | string | No | — | Label rendered above the color bar. | | description | string | No | — | Helper text rendered below the component. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container. | | 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 root container. | | id | string | No | — | id attribute on the root container. |

Usage

Basic

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

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

  return (
    <ColorPaletteField
      label="Event color"
      value={color}
      onChange={setColor}
    />
  );
}