ReadOnlyCheckboxGroupField

ReadOnlyCheckboxGroupField renderiza una lista de valores seleccionados de un grupo de checkboxes como salida no editable. Es el equivalente de solo lectura de un input de grupo de checkboxes, mostrando cuáles opciones fueron elegidas en pantallas de detalle y visualización.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string[] | Sí | — | Array de valores de opciones seleccionadas. | | options | { value: string; label: string }[] | Sí | — | La lista completa de opciones disponibles. Cada una debe tener las claves value y label. | | label | string | No | — | Etiqueta mostrada encima del grupo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo en cursiva. | | containerStyle | React.CSSProperties | No | — | Estilos personalizados para el div contenedor externo. | | labelStyle | React.CSSProperties | No | — | Estilos personalizados para el elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos personalizados para el texto de descripción. |

Uso

Básico

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

const dayOptions = [
  { value: 'mon', label: 'Lunes' },
  { value: 'tue', label: 'Martes' },
  { value: 'wed', label: 'Miércoles' },
];

<ReadOnlyCheckboxGroupField
  label="Días laborables"
  value={['mon', 'wed']}
  options={dayOptions}
/>

Con descripción

<ReadOnlyCheckboxGroupField
  label="Funciones habilitadas"
  value={['exports', 'reports']}
  options={featureOptions}
  description="Funciones habilitadas para el plan de esta organización."
/>