RHFPasswordInput

RHFPasswordInput an enhanced version of the TextField component, designed specifically for password input on signup and login pages. This component 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 also requires just 3-4 essential props to render a fully functional field.

<RHFPasswordInput
  fieldName="password"
  register={register}
  errorMessage={errors?.password?.message}
/>

Examples

• RHFPasswordInput
• TextField with Input Adornment
• Complete Form

API

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

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.
register	UseFormRegister	✅	The register 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	(e: ChangeEvent) => void		An optional callback function when the value of a field changes. The changed value can be obtained from e.target.value.
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.
showPasswordIcon	ReactNode		Icon component to show password, such as VisibilityIcon from @mui/icons-material/Visibility.
hidePasswordIcon	ReactNode		Icon component to hide password text, such as VisibilityOffIcon from @mui/icons-material/VisibilityOff.
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.