Password Field

The Password Field component provides a secure text input for passwords with a toggle button to show/hide the password text.

Basic Usage

{
  "type": "password",
  "name": "password",
  "label": "Password",
  "placeholder": "Enter password..."
}

With Validation

{
  "type": "password",
  "name": "new_password",
  "label": "New Password",
  "placeholder": "At least 8 characters",
  "required": true,
  "min_length": 8
}

Confirm Password

{
  "type": "password",
  "name": "confirm_password",
  "label": "Confirm Password",
  "placeholder": "Re-enter password",
  "required": true
}

Field Schema

interface PasswordFieldSchema {
  type: 'password';
  name: string;                  // Field name/ID
  label?: string;                // Field label
  placeholder?: string;          // Placeholder text
  value?: string;                // Default value
  required?: boolean;            // Is field required
  readonly?: boolean;            // Read-only mode (shows ••••••)
  disabled?: boolean;            // Disabled state
  className?: string;            // Additional CSS classes
  
  // Validation
  min_length?: number;           // Minimum character length
  max_length?: number;           // Maximum character length
}

Features

• Masked Input: Password is hidden by default with bullet points (•)
• Toggle Visibility: Eye icon button to show/hide password
• Secure Display: Read-only mode always shows ••••••••
• Validation: Built-in support for length requirements

Security Best Practices

When using password fields:

1. Never log passwords: Don't log form values containing passwords
2. Use HTTPS: Always transmit over secure connections
3. Validation: Enforce minimum length and complexity requirements
4. Storage: Never store passwords in plain text on the backend
5. Auto-complete: Consider disabling auto-complete for sensitive passwords

Use Cases

• User Registration: New account password
• Login Forms: User authentication
• Password Change: Updating existing passwords
• Security Settings: API keys, tokens (when masked input is appropriate)