ReadOnlyRadioField

ReadOnlyRadioField renders the currently selected option from a set of radio choices as non-editable output. The active value is highlighted as a styled pill using the theme's primary color. It optionally supports a custom render function for advanced option presentation. Used in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string | Yes | "" | The value of the currently selected option. | | options | any[] | Yes | [] | Array of option objects. 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. | | renderOption | (option: any, isClickable?: boolean, index?: number, isActive?: boolean) => React.ReactNode | No | — | Custom render function for the selected option. Only used when useCustomRender is true. | | useCustomRender | boolean | No | false | When true, delegates rendering of the selected option to renderOption. | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

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

const statusOptions = [
  { value: 'active', label: 'Active' },
  { value: 'inactive', label: 'Inactive' },
  { value: 'pending', label: 'Pending' },
];

<ReadOnlyRadioField
  label="Status"
  value="active"
  options={statusOptions}
/>

With custom renderer

<ReadOnlyRadioField
  label="Priority"
  value="high"
  options={priorityOptions}
  useCustomRender
  renderOption={(option) => (
    <span style={{ color: option.color }}>{option.label}</span>
  )}
/>