@nish1896/rhf-mui-components/mui/number-input/index.d.ts

A suite of 25+ production-ready react-hook-form components built with material-ui. Fully typed, tree-shakable, and optimized for enterprise-grade forms.

import { CustomComponentIds, CustomOnChangeProps } from "../../types/common.js";
import { FormHelperTextProps, FormLabelProps, TextFieldProps } from "../../types/mui.js";
import { ChangeEvent, FocusEvent, JSX, ReactNode, Ref } from "react";
import { Control, FieldValues, Path, RegisterOptions } from "react-hook-form";

//#region src/mui/number-input/index.d.ts
type OnValueChangeProps = {
  newValue: number | null;
  event: ChangeEvent<HTMLInputElement>;
};
type TextFieldInputProps = Omit<TextFieldProps, 'type' | 'multiline' | 'rows' | 'minRows' | 'maxRows' | 'onChange' | 'onBlur'> & {
  /** Always an `<input>`; multiline / textarea are not supported. */onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
};
type RHFNumberInputProps<T extends FieldValues> = {
  /**
   * Name/path of the React Hook Form field this component controls.
   */
  fieldName: Path<T>;
  /**
   * React Hook Form control object returned by `useForm`.
   */
  control: Control<T>;
  /**
   * Validation rules passed to React Hook Form for this field.
   */
  registerOptions?: RegisterOptions<T, Path<T>>;
  /**
   * Overrides the default number input change handling.
   * Receives the parsed numeric value and the original input change event.
   * Call `rhfOnChange` with the number or `null` value that should be stored; else the form value will not be updated.
   *
   * @param rhfOnChange - React Hook Form field change handler for the numeric value.
   * @param newValue - Parsed number value, or `null` when the input is empty.
   * @param event - Original input change event.
   */
  customOnChange?: ({
    rhfOnChange,
    newValue,
    event
  }: CustomOnChangeProps<OnValueChangeProps, number | null>) => void;
  /**
   * Called after the default number input handler stores the parsed numeric value in React Hook Form.
   *
   * ⚠️ Important:
   * This callback is not called when `customOnChange` is used.
   *
   * @param newValue - Parsed number value, or `null` when the input is empty.
   * @param event - Original input change event.
   */
  onValueChange?: ({
    newValue,
    event
  }: OnValueChangeProps) => void;
  /**
   * When true, renders the field label above the form field instead of inside or beside it.
   */
  showLabelAboveFormField?: boolean;
  /**
   * Props forwarded to the internal `FormLabel`. The `id` is managed by the component.
   */
  formLabelProps?: Omit<FormLabelProps, 'id'>;
  /**
   * When true, hides the rendered field label while preserving accessible labeling where possible.
   */
  hideLabel?: boolean;
  /**
   * When `true`, only integer values are allowed. Decimal input is blocked.
   * Cannot be used together with `maxDecimalPlaces`.
   */
  onlyIntegers?: boolean;
  /**
   * When `true`, negative and exponential values are not allowed
   * while typing or pasting.
  */
  nonNegative?: boolean;
  /**
   * Maximum number of decimal places allowed. When set, the user cannot type
   * or paste more than this number of decimal places. Cannot be used together
   * with `onlyIntegers`.
   */
  maxDecimalPlaces?: number;
  /**
   * Show the increment and decrement markers on number input. Hidden by default.
   */
  showMarkers?: boolean;
  /**
   * The amount to increase/decrease value when using arrow keys or input steppers.
   * @default 1
   */
  stepAmount?: number;
  /**
   * @deprecated
   * Field error message is now automatically derived from form state.
   * Passing this prop is no longer necessary and it will be removed in the next major version.
   */
  errorMessage?: ReactNode;
  /**
   * If true, hides the error message text while keeping the field in an error state.
   */
  hideErrorMessage?: boolean;
  /**
   * Props forwarded to the internal `FormHelperText`. The `id` is managed by the component.
   */
  formHelperTextProps?: Omit<FormHelperTextProps, 'id'>;
  /**
   * Custom ids for generated field, label, helper text, and error elements.
   */
  customIds?: CustomComponentIds;
} & TextFieldInputProps;
declare const RHFNumberInput: <T extends FieldValues>(props: RHFNumberInputProps<T> & {
  ref?: Ref<HTMLInputElement>;
}) => JSX.Element;
//#endregion
export { RHFNumberInputProps, RHFNumberInput as default };