ReadOnlyCheckboxGroupField

ReadOnlyCheckboxGroupField renders a list of selected values from a group of checkboxes as non-editable output. It is the read-only counterpart of a checkbox group input, showing which options were chosen in detail and view screens.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | string[] | Yes | — | Array of selected option values. | | 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 group. | | description | string | No | — | Helper text shown below the field in italic. | | containerStyle | React.CSSProperties | No | — | Style overrides for the outer wrapper div. | | labelStyle | React.CSSProperties | No | — | Style overrides for the label element. | | descriptionStyle | React.CSSProperties | No | — | Style overrides for the description text. |

Usage

Basic

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

const dayOptions = [
  { value: 'mon', label: 'Monday' },
  { value: 'tue', label: 'Tuesday' },
  { value: 'wed', label: 'Wednesday' },
];

<ReadOnlyCheckboxGroupField
  label="Working Days"
  value={['mon', 'wed']}
  options={dayOptions}
/>

With description

<ReadOnlyCheckboxGroupField
  label="Enabled Features"
  value={['exports', 'reports']}
  options={featureOptions}
  description="Features enabled for this organization plan."
/>