MoneyInput

react-hook-form-bound currency field. Renders the @uxf/ui/text-input primitive with type="number", a currency symbol in the rightElement, and stores a Money object, managing the input's value, isInvalid, and helperText from form state.

When to use

Use @uxf/form/money-input for a monetary amount inside a @uxf/form form when the form value must be a Money object ({ amount, currency }), not a bare number. It renders the amount, shows the currency symbol, and tracks the currency. There is no same-named @uxf/ui twin; for a plain numeric field use @uxf/form/number-input.

Usage

import { Form } from "@uxf/form/form";
import { MoneyInput, MoneyInputValue } from "@uxf/form/money-input";
import { useForm } from "react-hook-form";

interface FormData {
    price: MoneyInputValue;
}

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { price: { amount: "100", currency: "USD" } } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <MoneyInput control={formApi.control} label="Price" max={200} min={100} name="price" />
        </Form>
    );
}

Value is Money | null (MoneyInputValue), where Money is { amount: string; currency: Currency } from @uxf/core/money. Empty input becomes null; amount is stored as a string, currency defaults to defaultCurrency (or "CZK") until the value sets one.

Props

MoneyInputProps<FormData> = ControlProps<FormData> (without defaultValue) + a subset of the @uxf/ui FormControlProps<MoneyInputValue> (minus value / onChange) + the props below. This field exposes an explicit, curated prop set rather than forwarding the full twin prop surface.

Validation

• isRequired adds a required rule (requiredMessage to override; key uxf-form-money-input:validation.required).
• min / max compare against value.amount; messages (uxf-form-money-input:validation.min-value / max-value) interpolate {{min}}/{{max}} and are overridable via the minMessage / maxMessage functions.
• Add further rules via rules (a function validate is merged in under the custom key); the field-level error is shown as the twin's helperText and sets isInvalid.

Requirements

• Must be rendered inside a Form — it reads the form context (formId, and inherits isDisabled / isReadOnly) and needs a react-hook-form control.
• Ships no CSS of its own; it renders @uxf/ui/text-input (with the uxf-money-input / uxf-input--no-spin-buttons classes), so include that component's stylesheet(s) and the @uxf/ui token layer — see @uxf/ui/text-input.

Links

• Rendered primitive: @uxf/ui/text-input
• Value type: Money / Currency in @uxf/core/money