ReadOnlyAutocompleteField

ReadOnlyAutocompleteField renders the result of an autocomplete selection as non-editable output. It supports both single and multiple selections, displaying each item as a chip with an optional image and secondary description. On mount it calls onChange with the current value to keep parent state synchronized. Used in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | any \| any[] | Yes | — | The selected item object, or an array of objects when multiple is true. | | onChange | (selectedValue: any \| any[]) => void | Yes | — | Callback invoked on mount with the current value (for state sync). | | multiple | boolean | No | false | When true, treats value as an array and renders each item as a chip. | | label | string | No | — | Label shown above the field. | | description | string | No | — | Helper text shown below the field in italic. | | placeholder | string | No | — | Accepted but not rendered (reserved for API consistency). | | itemLabelKey | string | No | "name" | Object key used to read the display label from each item. | | itemDescriptionKey | string | No | — | Object key used to read a secondary description from each item. | | itemImageKey | string | No | — | Object key used to read an image URL from each item. Renders a circular thumbnail when provided. | | containerStyle | React.CSSProperties | No | {} | Style overrides for the outer wrapper div. | | valueStyle | React.CSSProperties | No | {} | Style overrides for the value display box. | | labelStyle | React.CSSProperties | No | {} | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | {} | Style overrides for the description text. | | itemLabelStyle | React.CSSProperties | No | {} | Style overrides for each item's label text. | | itemDescriptionStyle | React.CSSProperties | No | {} | Style overrides for each item's secondary description text. | | itemImageStyle | React.CSSProperties | No | {} | Style overrides for each item's thumbnail image. |

Usage

Single selection

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

<ReadOnlyAutocompleteField
  label="Assigned User"
  value={{ name: 'Jane Doe' }}
  onChange={(v) => console.log(v)}
/>

Multiple selections with image

<ReadOnlyAutocompleteField
  label="Team Members"
  value={[
    { name: 'Jane Doe', avatar: '/avatars/jane.png' },
    { name: 'John Smith', avatar: '/avatars/john.png' },
  ]}
  multiple
  itemLabelKey="name"
  itemImageKey="avatar"
  onChange={(v) => console.log(v)}
/>

With secondary description

<ReadOnlyAutocompleteField
  label="Product"
  value={{ name: 'Widget Pro', sku: 'WGT-001' }}
  itemLabelKey="name"
  itemDescriptionKey="sku"
  onChange={(v) => console.log(v)}
/>