ReadOnlyNumberField

ReadOnlyNumberField renderiza un valor numérico como salida no editable. Soporta strings opcionales de prepend y append para agregar unidades, símbolos de moneda o cualquier decorador alrededor del número. Se usa en pantallas de detalle y visualización.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | number | Sí | — | El valor numérico a mostrar. Muestra 0 cuando es falsy. | | label | string | No | — | Etiqueta mostrada encima del valor. | | description | string | No | — | Texto de ayuda mostrado debajo del valor en cursiva. | | placeholder | string | No | — | Aceptado pero no renderizado (reservado para consistencia de API). | | prepend | string | No | — | Texto renderizado antes del número (ej. "$", "USD"). | | append | string | No | — | Texto renderizado después del número (ej. "kg", "%"). | | 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. | | prependStyle | React.CSSProperties | No | — | Estilos personalizados para el elemento de prefijo. | | appendStyle | React.CSSProperties | No | — | Estilos personalizados para el elemento de sufijo. |

Uso

Básico

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

<ReadOnlyNumberField
  label="Cantidad"
  value={42}
/>

Con prefijo de moneda

<ReadOnlyNumberField
  label="Precio total"
  value={1500}
  prepend="$"
/>

Con sufijo de unidad

<ReadOnlyNumberField
  label="Peso"
  value={75}
  append="kg"
  description="Peso neto del envío."
/>