RHFPasswordInput

RHFPasswordInput is a TextField-based password field with a built-in show/hide visibility toggle. It binds the field to React Hook Form through control, and handles the label, error state and helper text for you.

Usage

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

Pass the control returned by useForm and the fieldName to bind:

import { useForm } from 'react-hook-form';

type FormValues = {
  password: string;
};

const { control, handleSubmit } = useForm<FormValues>({
  defaultValues: { password: '' }
});

<form onSubmit={handleSubmit(values => console.log(values))}>
  <RHFPasswordInput
    fieldName="password"
    control={control}
    registerOptions={{
      required: 'Please enter your password',
      minLength: {
        value: 8,
        message: 'Password must be at least 8 characters long'
      }
    }}
  />
</form>

A show/hide button at the end of the field swaps the input type between password and text. It is a real button, so it works from the keyboard, and clicking it doesn't take focus away from the input.
The button's accessible name switches between "Show password" and "Hide password".
autoComplete defaults to off. Set it to current-password on a login form, or new-password when creating or changing a password, so password managers can fill or offer to save it.

Validation

Rules go in registerOptions, exactly as with register. The required marker on the label is derived from registerOptions.required.

Strong password rules

Use pattern for a single rule, or a validate object to give each rule its own message:

<RHFPasswordInput
  fieldName="password"
  control={control}
  autoComplete="new-password"
  registerOptions={{
    required: 'Password is required',
    validate: {
      length: value => value.length >= 8 || 'Use at least 8 characters',
      uppercase: value => /[A-Z]/.test(value) || 'Add an uppercase letter',
      digit: value => /\d/.test(value) || 'Add a digit'
    }
  }}
/>

To list every failing rule at once, set criteriaMode: 'all' in useForm and read error.types in renderError:

const { control } = useForm<FormValues>({ criteriaMode: 'all' });

<RHFPasswordInput
  fieldName="password"
  control={control}
  registerOptions={{
    validate: {
      length: value => value.length >= 8 || 'Use at least 8 characters',
      uppercase: value => /[A-Z]/.test(value) || 'Add an uppercase letter',
      digit: value => /\d/.test(value) || 'Add a digit'
    }
  }}
  renderError={error => (
    <ul style={{ margin: 0, paddingLeft: 16 }}>
      {Object.values(error.types ?? {}).map(message => (
        <li key={String(message)}>{String(message)}</li>
      ))}
    </ul>
  )}
/>

Confirming a password

Compare against another field with getValues (or watch) inside validate:

const { control, getValues } = useForm<SignupValues>();

<RHFPasswordInput fieldName="password" control={control} />

<RHFPasswordInput
  fieldName="confirmPassword"
  control={control}
  label="Confirm password"
  registerOptions={{
    validate: value =>
      value === getValues('password') || 'Passwords do not match'
  }}
/>

Custom show/hide icons

showPasswordIcon is displayed while the password is hidden (clicking it reveals the value), and hidePasswordIcon while it is visible. They default to the Material Visibility and VisibilityOff icons, and accept any ReactNode:

import KeyIcon from '@mui/icons-material/Key';
import KeyOffIcon from '@mui/icons-material/KeyOff';

<RHFPasswordInput
  fieldName="password"
  control={control}
  showPasswordIcon={<KeyIcon />}
  hidePasswordIcon={<KeyOffIcon />}
/>

Plain text works too. Give the button a rounded-rectangle shape so the text fits:

<RHFPasswordInput
  fieldName="password"
  control={control}
  showPasswordIcon="Show"
  hidePasswordIcon="Hide"
  iconButtonProps={{
    sx: { borderRadius: 1, px: 1.5, fontSize: 14 }
  }}
/>

Styling the toggle button

iconButtonProps forwards IconButtonProps to the toggle, for example a size, color or sx. type, onClick, onMouseDown, edge, disabled and aria-label are controlled by the component, so overriding them has no effect.

<RHFPasswordInput
  fieldName="password"
  control={control}
  iconButtonProps={{
    size: 'small',
    color: 'warning'
  }}
/>

Adding your own end adornment

An end adornment passed through slotProps.input is rendered before the toggle, so both stay in the field:

import InputAdornment from '@mui/material/InputAdornment';
import LockIcon from '@mui/icons-material/Lock';

<RHFPasswordInput
  fieldName="password"
  control={control}
  slotProps={{
    input: {
      endAdornment: (
        <InputAdornment position="end">
          <LockIcon fontSize="small" />
        </InputAdornment>
      )
    }
  }}
/>

Read-only and disabled

With readOnly, the value can't be edited but the toggle still works, so the user can reveal it to verify it. disabled makes the whole field inert, including the toggle, and a form-level disabled on useForm is respected too.

Handling value changes

onValueChange runs after the new value has been stored in the form. It receives { newValue, event }, for example to drive a strength meter:

<RHFPasswordInput
  fieldName="password"
  control={control}
  onValueChange={({ newValue, event }) => {
    setPasswordStrength(getPasswordStrength(newValue))
  }}
/>

Use customOnChange when you need to change what gets stored. It replaces the default handling, so you must call rhfOnChange yourself with the value to store. This example strips whitespace:

<RHFPasswordInput
  fieldName="password"
  control={control}
  customOnChange={({ rhfOnChange, newValue, event }) => {
    rhfOnChange(newValue.replace(/\s/g, ''));
  }}
/>

onValueChange is not called when customOnChange is used.

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