ReadOnlySelectField

ReadOnlySelectField renders the label of the currently selected option from a list as non-editable output. It is the read-only counterpart of a select/dropdown input, resolving the stored value to its human-readable label in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | — | The value of the selected option. | | options | { value: string; label: string }[] | Yes | — | The full list of available options. Each must have value and label keys. | | 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 box. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

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

const countryOptions = [
  { value: 'ar', label: 'Argentina' },
  { value: 'br', label: 'Brazil' },
  { value: 'cl', label: 'Chile' },
];

<ReadOnlySelectField
  label="Country"
  value="ar"
  options={countryOptions}
/>
// Renders: Argentina

With description

<ReadOnlySelectField
  label="Payment Method"
  value={order.paymentMethod}
  options={paymentOptions}
  description="The method used to complete this payment."
/>