Developer Docs

Quick reference guides with props tables, usage examples, and best practices for rapid development

Components

Form Components

Display Components

Feedback Components

Layout Components

Navigation Components

Components/Docs/Password

Password

Password input with visibility toggle (extends Input component)

Password Component

Password input field with visibility toggle button. Extends Input component with eye icon to show/hide password characters. Each instance maintains independent visibility state.

Password*

📋 Props

Password accepts all Input component props, plus: buttonClass

Prop	Type	Default	Description
id	string	password-{timestamp}	Unique identifier (auto-generated if not provided)
label	string	Password	Label text for the password field
value	van.State \| string	undefined	Input value (can be state or primitive)
message	Object	undefined	Validation message from Input { code, detail }
required	boolean	false	Whether field is required
disabled	boolean	false	Whether input is disabled (toggle button respects this)
buttonClass	string	undefined	Toggle button classes (overrides defaults via filterClassName)
oninput	Function	undefined	Input event handler

💻 Basic Usage

🍦 Simple Password Field

Password

const password = van.state('');

Password({
  value: password,
  oninput: e => password.val = e.target.value
})

✅ With Validation

New Password*

const passwordError = van.state({ code: '', detail: '' });

Password({
  label: 'New Password',
  required: true,
  value: password,
  message: passwordError,
  oninput: e => {
    password.val = e.target.value;
    if (e.target.value.length < 8) {
      passwordError.val = {
        code: 'error',
        detail: 'At least 8 characters required'
      };
    } else {
      passwordError.val = {
        code: 'success',
        detail: 'Strong password!'
      };
    }
  }
})

☑️ Confirm Password Pattern

Common pattern for password confirmation with real-time validation.

New Password*

Confirm Password*

const password = van.state('');
const confirmPassword = van.state('');
const confirmError = van.state({ code: '', detail: '' });

// First password field
Password({
  label: 'New Password',
  value: password,
  oninput: e => {
    password.val = e.target.value;
    // Re-validate confirm if it has value
    if (confirmPassword.val) {
      if (confirmPassword.val !== e.target.value) {
        confirmError.val = {
          code: 'error',
          detail: 'Passwords do not match'
        };
      } else {
        confirmError.val = {
          code: 'success',
          detail: 'Passwords match!'
        };
      }
    }
  }
})

// Confirm password field
Password({
  label: 'Confirm Password',
  value: confirmPassword,
  message: confirmError,
  oninput: e => {
    confirmPassword.val = e.target.value;
    if (e.target.value !== password.val) {
      confirmError.val = {
        code: 'error',
        detail: 'Passwords do not match'
      };
    } else {
      confirmError.val = {
        code: 'success',
        detail: 'Passwords match!'
        };
    }
  }
})

🔲 Toggle Button Customization

Customize the visibility toggle button with buttonClass prop.

Custom Toggle Button

Password({
  label: 'Custom Toggle Button',
  value: password,
  buttonClass: 'hover:text-sky text-2xl',
  oninput: e => password.val = e.target.value
})

🚫 Disabled State

Toggle button automatically respects disabled state.

Disabled Password

Password({
  label: 'Disabled Password',
  value: 'cannot-edit',
  disabled: true
})

⚡️ Best Practices

✓ Do This

✓Use confirm password pattern for critical operations

- Always require confirmation when setting new passwords (registration, password change).

✓Provide real-time validation feedback

- Show password strength and requirements as user types using message prop.

✓Each instance has independent visibility state

- Each Password component manages its own show/hide state automatically.

✓Use appropriate autocomplete attributes

- Add autocomplete="current-password" or "new-password" for browser password managers.

✗ Avoid This

✗Don't try to share visibility state

- Each Password component manages its own visibility - don't try to control it externally.

✗Don't show password strength in confirm field

- Only validate matching in confirm field, show strength only in the first password field.

✗Don't block paste in password fields

- Users should be able to paste passwords from password managers.

✗Don't use placeholder instead of label

- Always provide a visible label, don't rely solely on placeholder text.

✨ Key Features

⭑Extends Input Component

- All Input props and features available (validation, messages, styling, etc.)

⭑Automatic Visibility Toggle

- Eye icon toggles between password (•••) and text display automatically

⭑Grid Overlay Pattern

- Toggle button positioned via CSS Grid overlay (from Input component)

⭑Independent State Per Instance

- Each Password component maintains its own show/hide state using van.state

⭑Disabled State Handling

- Toggle button automatically disables when input is disabled

⭑Customizable Toggle Button

- Override toggle button styling via buttonClass prop with filterClassName support

⭑Oracle JET Icons

- Uses oj-ux-ico-view and oj-ux-ico-view-hide for consistent icon design

⭑Accessibility

- Proper aria-label and title attributes for screen readers and tooltips

Explore More Components

Browse other component categories