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

With Validation

Confirm Password

Field Schema

A password field is authored as PasswordFieldMetadata (@object-ui/types), which is the source of truth for the key set: it extends BaseFieldMetadata with the two length bounds. The reveal toggle and the masked read-only rendering are the widget's.

import type { PasswordFieldMetadata } from '@object-ui/types';

const password: PasswordFieldMetadata = {
  type: 'password',
  name: 'password',
  label: 'Password',
  placeholder: 'Enter a password',
  required: true,
  min_length: 12,
  max_length: 128,
};

The value being edited, and the className / disabled a host supplies, are not metadata keys — they are runtime widget props. See Field Widget Props.

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)