ReadOnlyColorField

ReadOnlyColorField renders a color value as non-editable output. It typically displays a color swatch alongside the color code (e.g. a hex string), making it suitable for showing brand colors, category tags, or any color-coded attribute in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | The color value to display (e.g. "#ff5722", "rgb(255,87,34)"). | | label | string | No | — | Label shown above the field. | | 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 value 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 ReadOnlyColorField from '@/components/read-only-fields/ReadOnlyColorField';

<ReadOnlyColorField
  label="Brand Color"
  value="#ff5722"
/>

With description

<ReadOnlyColorField
  label="Category Color"
  value="#1565c0"
  description="Color used to identify this category in listings."
/>