ReadOnlyColorPaletteField

ReadOnlyColorPaletteField renders a palette of multiple color values as non-editable output. Each color is shown as a swatch, making it suitable for displaying theme palettes, product color variants, or any multi-color attribute in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string[] | Yes | — | Array of color strings to display (e.g. ["#ff5722", "#1565c0"]). | | label | string | No | — | Label shown above the palette. | | description | string | No | — | Helper text shown below the field in italic. | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper div. | | valueStyle | React.CSSProperties | No | — | Style overrides for the palette display area. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

import ReadOnlyColorPaletteField from '@/components/read-only-fields/ReadOnlyColorPaletteField';

<ReadOnlyColorPaletteField
  label="Theme Colors"
  value={['#1565c0', '#e53935', '#43a047']}
/>

With description

<ReadOnlyColorPaletteField
  label="Available Variants"
  value={product.colors}
  description="Colors in which this product is available."
/>