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, minLength and maxLength — @objectstack/spec's own FieldSchema members, typed by reference. 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,
  minLength: 12,
  maxLength: 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 shows •••••••• for a stored value, never the value itself; an empty value shows the shared "No value" affordance instead
• Validation: Built-in support for length requirements

Cell Renderer

In tables/grids, a stored password or secret value renders as a fixed mask (••••••), never as the value. An empty value (null, undefined, '' or []) renders the shared "No value" affordance instead, so a credential that was never set is distinguishable from one that is.

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)