ReadOnlyRadioField

ReadOnlyRadioField renderiza la opción actualmente seleccionada de un conjunto de opciones de radio como salida no editable. El valor activo se resalta como una píldora estilizada usando el color primario del tema. Opcionalmente soporta una función de renderizado personalizado para presentaciones avanzadas de opciones. Se usa en pantallas de detalle y visualización.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | "" | El valor de la opción actualmente seleccionada. | | options | any[] | Sí | [] | Array de objetos de opciones. Cada uno debe tener las claves value y label. | | label | string | No | — | Etiqueta mostrada encima del campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo en cursiva. | | renderOption | (option: any, isClickable?: boolean, index?: number, isActive?: boolean) => React.ReactNode | No | — | Función de renderizado personalizado para la opción seleccionada. Solo se usa cuando useCustomRender es true. | | useCustomRender | boolean | No | false | Cuando es true, delega el renderizado de la opción seleccionada a renderOption. | | containerStyle | React.CSSProperties | No | — | Estilos personalizados para el 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 ReadOnlyRadioField from '@/components/read-only-fields/ReadOnlyRadioField';

const statusOptions = [
  { value: 'active', label: 'Activo' },
  { value: 'inactive', label: 'Inactivo' },
  { value: 'pending', label: 'Pendiente' },
];

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

Con renderizado personalizado

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