RHFNumberInput

RHFNumberInput is available from version 2.1 and above.

RHFNumberInput is an enhanced version of the TextField component which accepts only integer or float values. It retains the core functionality, styling options, and flexibility of the TextField, while seamlessly integrating with react-hook-form for number-specific input handling.

Usage

import RHFNumberInput, { RHFNumberInputProps } from '@nish1896/rhf-mui-components/mui/number-input';

To render a fully functional RHFNumberInput, you only need 3-4 essential props.

<RHFNumberInput
  fieldName="age"
  control={control}
  errorMessage={errors?.age?.message}
/>

Examples

• RHFNumberInput
• TextField
• Complete Form

API

The RHFNumberInputProps interface extends TextFieldProps and includes the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process. This is a required prop for all components.
control	UseFormControl	✅	The control option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options for validation if using react-hook-form without any validation libraries like yup or Joi.
onValueChange	(value: number OR null) => void		An optional callback function that returns the parsed numeric value, which can be an integer, float, or null if the input is empty.
label	ReactNode		The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name" using the fieldNameToLabel function.
showLabelAboveFormField	boolean		Render form label above the form field in FormLabel component.
formLabelProps	FormLabelProps		FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
showMarkers	boolean		Show the increment and decrement markers on number input. Hidden by default.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		A flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.