RHFNumberInput

RHFNumberInput is an enhanced version of the TextField component that 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 two or three essential props.

<RHFNumberInput
  fieldName="age"
  control={control}
/>

Examples

API

The RHFNumberInputProps interface extends TextFieldProps and includes the following additional props. Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name of the field registered with React Hook Form. This prop is required for all components.
`control`*	UseFormControl	The control option yielded on calling the useForm hook.
`registerOptions`	`RegisterOptions`	React Hook Form validation rules. Useful when not using a schema validation library such as Yup or Joi.
`customOnChange`	`({ rhfOnChange, newValue, event }) => void`	Override the default `onChange` behavior of the input. You must pass the updated `newValue` to the rhfOnChange function to update the field value.
`onValueChange`	`({ newValue, event }) => void`	Callback function triggered when the field value changes.
`hideLabel`	`boolean`	Hides the FormLabel component if you don’t want to display the default form label component or prefer to render a fully custom label instead.
`onlyIntegers`	`boolean`	When `true`, restricts input to zero, positive and negative integers only.
`nonNegative`	`boolean`	When `true`, restricts input to non-negative numbers (including zero) and sets `min` to `0` on the underlying input. When `false` or omitted, negative values and a leading `-` are allowed while typing.
`maxDecimalPlaces`	`number`	Limits how many digits a user can enter after the decimal point
`stepAmount`	`number`	The amount to increase/decrease value when using arrow keys or input steppers
`label`	`ReactNode`	The text to render in the FormLabel component. By default, the value of `fieldName` is transformed (e.g., "firstName" to "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.
`renderError`	`(error: FieldError) => ReactNode`	Custom renderer for the React Hook Form field error. Receives the current field error and returns the content to display, such as `error.message` or a custom React element in the `HelperText` component. Added in `v4.1.0`.
`hideErrorMessage`	`boolean`	A flag to prevent replacement of helper text of a field by the `errorMessage` when the validation is triggered.
`helperText`	`ReactNode`	The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Source Code

View the full implementation of this component on GitHub.

Password Input

Tags Input