ReadOnlySelectField

ReadOnlySelectField renderiza la etiqueta de la opción actualmente seleccionada de una lista como salida no editable. Es el equivalente de solo lectura de un input select/desplegable, resolviendo el valor almacenado a su etiqueta legible por humanos en pantallas de detalle y visualización.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | string | Sí | — | El valor de la opción seleccionada. | | 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 campo. | | description | string | No | — | Texto de ayuda mostrado debajo del campo en cursiva. | | containerStyle | React.CSSProperties | No | — | Estilos personalizados para el div contenedor externo. | | valueStyle | React.CSSProperties | No | — | Estilos personalizados para el cuadro de visualización del valor. | | 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 ReadOnlySelectField from '@/components/read-only-fields/ReadOnlySelectField';

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

<ReadOnlySelectField
  label="País"
  value="ar"
  options={countryOptions}
/>
// Renderiza: Argentina

Con descripción

<ReadOnlySelectField
  label="Método de pago"
  value={order.paymentMethod}
  options={paymentOptions}
  description="El método utilizado para completar este pago."
/>