RHFPasswordInput

RHFPasswordInput extends the TextField component, designed specifically for password input on signup and login pages. It allows users to toggle password visibility, offering a more user-friendly experience when entering credentials.

Usage

import RHFPasswordInput, { RHFPasswordInputProps } from '@nish1896/rhf-mui-components/mui/password-input';

RHFPasswordInput only needs two or three essential props to render a fully functional field.

<RHFPasswordInput
  fieldName="password"
  control={control}
  registerOptions={{
    required: {
      value: true,
      message: 'Please enter your password'
    },
    minLength: {
      value: 8,
      message: 'Password must be at least 8 characters long'
    }
  }}
/>

Examples

API

The RHFPasswordInputProps interface extends TextFieldProps and includes additional options for password handling and input customization.

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.
`showPasswordIcon`	`ReactNode`	Custom icon displayed when the password value is hidden, such as `VisibilityIcon` from `@mui/icons-material/Visibility`.
`hidePasswordIcon`	`ReactNode`	Custom icon displayed when the password value is visible, such as `VisibilityOffIcon` from `@mui/icons-material/VisibilityOff`.
`readOnly`	`boolean`	When true, the value is displayed but cannot be edited. Unlike `disabled`, the field stays focusable, and the show/hide toggle remains usable — a read-only value is meaningful, so the user can still reveal it to verify it. Added in `v4.2.0`.
`iconButtonProps`	IconButtonProps	Props forwarded to the IconButton component that toggles password visibility. Added in `v4.3.0`.
`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.
`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.
`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.

Text Field

Number Input