MoneyField

MoneyField renderiza un input de número estilizado prefijado o sufijado por un símbolo de moneda. Maneja la precisión decimal via la prop decimalPlaces, calculando el step automáticamente cuando no se provee explícitamente. El componente emite un number (no un string) via onChange.

Props

| Prop | Tipo | Requerido | Por defecto | Descripción | |------|------|-----------|-------------|-------------| | value | number | No | 0 | Valor monetario actual. | | onChange | (value: number) => void | Sí | — | Llamado con el valor numérico parseado en cada cambio. | | label | string | No | — | Etiqueta mostrada sobre el input. | | description | string | No | — | Texto de ayuda mostrado debajo del input. | | placeholder | string | No | — | Texto placeholder del input. | | currencySymbol | string | No | '$' | Símbolo a mostrar junto al número. | | symbolPosition | 'start' \| 'end' | No | 'start' | Posición del símbolo de moneda relativa al input. | | symbolStyle | React.CSSProperties | No | — | Estilos del span del símbolo de moneda. | | decimalPlaces | number | No | 0 | Cantidad de decimales permitidos. Controla el step calculado cuando no se provee step. | | min | number | No | — | Valor mínimo permitido. | | max | number | No | — | Valor máximo permitido. | | step | number | No | — | Override manual del paso. Cuando se omite, se calcula como 1 / 10^decimalPlaces. | | containerStyle | React.CSSProperties | No | — | Estilos del div contenedor raíz. | | inputWrapperStyle | React.CSSProperties | No | — | Estilos del div wrapper interior. | | inputStyle | React.CSSProperties | No | — | Estilos aplicados directamente al elemento <input>. | | labelStyle | React.CSSProperties | No | — | Estilos del elemento de etiqueta. | | descriptionStyle | React.CSSProperties | No | — | Estilos del párrafo de descripción. | | className | string | No | — | Clase CSS del div wrapper. | | id | string | No | — | Atributo id del div wrapper. |

Uso

Básico

import React, { useState } from 'react';
import MoneyField from '@/components/fields/MoneyField';

export default function Example() {
  const [price, setPrice] = useState(0);

  return (
    <MoneyField
      label="Precio"
      value={price}
      onChange={setPrice}
      decimalPlaces={2}
    />
  );
}

Con símbolo euro al final

<MoneyField
  label="Monto"
  value={amount}
  onChange={setAmount}
  currencySymbol="€"
  symbolPosition="end"
  decimalPlaces={2}
  min={0}
/>