MoneyField

MoneyField renders a styled number input prefixed or suffixed by a currency symbol. It handles decimal precision via the decimalPlaces prop, computing the step automatically when not explicitly provided. The component emits a number (not a string) via onChange.

Props

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | value | number | No | 0 | Current monetary value. | | onChange | (value: number) => void | Yes | — | Called with the parsed numeric value on every change. | | label | string | No | — | Label rendered above the input. | | description | string | No | — | Helper text rendered below the input. | | placeholder | string | No | — | Placeholder text for the input. | | currencySymbol | string | No | '$' | Symbol to display alongside the number. | | symbolPosition | 'start' \| 'end' | No | 'start' | Position of the currency symbol relative to the input. | | symbolStyle | React.CSSProperties | No | — | Styles applied to the currency symbol span. | | decimalPlaces | number | No | 0 | Number of decimal places allowed. Controls the computed step when step is not provided. | | min | number | No | — | Minimum allowed value. | | max | number | No | — | Maximum allowed value. | | step | number | No | — | Manual step override. When omitted, computed as 1 / 10^decimalPlaces. | | containerStyle | React.CSSProperties | No | — | Styles applied to the root container div. | | inputWrapperStyle | React.CSSProperties | No | — | Styles applied to the inner wrapper div. | | inputStyle | React.CSSProperties | No | — | Styles applied directly to the <input> element. | | labelStyle | React.CSSProperties | No | — | Styles applied to the label element. | | descriptionStyle | React.CSSProperties | No | — | Styles applied to the description paragraph. | | className | string | No | — | CSS class name applied to the wrapper div. | | id | string | No | — | id attribute on the wrapper div. |

Usage

Basic

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

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

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

With euro symbol at the end

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