NumberInput

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

When to use

Use @uxf/form/number-input for a numeric field inside a @uxf/form form when the form value must be a number (not a string). It normalizes typed input (comma → dot decimal separator, strips spaces/thousands separators), blocks non-numeric keystrokes, and optionally clamps decimal places. There is no same-named @uxf/ui twin; for a plain text field use @uxf/ui/text-input.

Usage

import { Form } from "@uxf/form/form";
import { NumberInput } from "@uxf/form/number-input";
import { useForm } from "react-hook-form";

interface FormData {
    amount: number | null;
}

function Example() {
    const formApi = useForm<FormData>({ defaultValues: { amount: null } });

    return (
        <Form formApi={formApi} id="example" onSubmit={(values) => console.log(values)}>
            <NumberInput control={formApi.control} decimalPlaces={2} label="Amount" max={50} name="amount" />
        </Form>
    );
}

Value is number | null (NumberInputValue) — empty/unparseable input becomes null.

Props

NumberInputProps<FormData> = ControlProps<FormData> + the visual props of the @uxf/ui/text-input twin (minus the ones this field manages: inputMode, isFocused, isInvalid, maxLength, minLength, name, onChange, value, type) + the props below.

All other props (label, placeholder, size, variant, helperText, leftAddon/rightAddon/leftElement/rightElement, step, autoComplete, …) are forwarded to the twin — see @uxf/ui/text-input.

Validation

• isRequired adds a required rule (requiredMessage to override; key uxf-form-number-input:validation.required).
• min / max add value-bound checks; messages (uxf-form-number-input:validation.min-value / max-value) interpolate {{min}}/{{max}} and are overridable via minMessage / maxMessage.
• 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, 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