PasswordField

Description

A password input field component with optional show/hide toggle functionality. Includes automatic minimum length validation and integrates with React Hook Form.

Import

import { PasswordField } from '@components/common/form/PasswordField';

Usage

import { Form } from '@components/common/form/Form';
import { PasswordField } from '@components/common/form/PasswordField';

function LoginForm() {
  return (
    <Form action="/api/login">
      <PasswordField
        name="password"
        label="Password"
        required
        showToggle
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	string	-	Field name (required)
label	string	-	Label text displayed above the input
showToggle	boolean	false	Show/hide password visibility toggle button
minLength	number	6	Minimum password length
required	boolean	false	Makes the field required
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
validation	RegisterOptions	-	React Hook Form validation rules
prefixIcon	React.ReactNode	-	Icon displayed on the left inside the input
suffixIcon	React.ReactNode	-	Icon displayed on the right inside the input
onChange	(value: string) => void	-	Callback fired when the value changes
wrapperClassName	string	-	CSS class for the wrapper div
...props	InputHTMLAttributes	-	All standard HTML input attributes

Example: With Toggle

import { Form } from '@components/common/form/Form';
import { PasswordField } from '@components/common/form/PasswordField';

function RegisterForm() {
  return (
    <Form action="/api/register">
      <PasswordField
        name="password"
        label="Password"
        placeholder="Enter your password"
        required
        showToggle
        minLength={8}
      />
      
      <PasswordField
        name="confirmPassword"
        label="Confirm Password"
        placeholder="Confirm your password"
        required
        showToggle
        validation={{
          validate: (value, formValues) => 
            value === formValues.password || 'Passwords do not match'
        }}
      />
    </Form>
  );
}

Example: With Custom Validation

import { Form } from '@components/common/form/Form';
import { PasswordField } from '@components/common/form/PasswordField';

function SecurityForm() {
  return (
    <Form action="/api/security">
      <PasswordField
        name="newPassword"
        label="New Password"
        required
        showToggle
        minLength={10}
        validation={{
          pattern: {
            value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/,
            message: 'Password must contain uppercase, lowercase, number, and special character'
          }
        }}
        helperText="Must be at least 10 characters with mixed case, numbers, and symbols"
      />
    </Form>
  );
}

Features

• Visibility Toggle: Optional button to show/hide password
• Automatic Validation: Built-in minimum length validation
• Icon Support: Add prefix or suffix icons
• Secure by Default: Uses password input type
• Auto-cleanup: Automatically unregisters on unmount

Related Components

• Form - Parent form component
• InputField - General text input