InputPassword

A password input with a show/hide toggle, a leading lock icon that reflects overall validity, and a configurable list of validation rules that turn green or red in real-time as the user types.

Anatomy

A label + input wrapper built on OriginInputComponent principles. The leading lock icon changes color when all rules pass (success) or any fail (error). The eye button on the right toggles visibility. The rules list renders below the input — each rule shows a circle (no input), check (passing), or X (failing).

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number
  • One special character (!@#$...)

Default Rules

Five default rules cover the most common password requirements. Type in the field below to see the rules update in real-time.

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number
  • One special character (!@#$...)

Default rules:

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number
  • One special character (!@#$...)

Custom Rules

Pass a rules array to override the defaults. Each rule is an object with a key, label, and a test function.

  • At least 12 characters
  • One uppercase letter
  • Two or more numbers
  • No spaces

Without Rules

Pass an empty array to disable the rules list. Useful for "confirm password" or login fields where rule display is not needed.

States

Empty (idle)

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number
  • One special character (!@#$...)

Partially filled

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number
  • One special character (!@#$...)

All rules passing

  • At least 8 characters
  • One uppercase letter
  • One lowercase letter
  • One number
  • One special character (!@#$...)

Design Guidelines

Do

  • Always provide a show/hide toggle. Forcing users to type blind increases errors, especially on mobile.
  • Show rules proactively, not reactively. Displaying requirements before the user types prevents frustration at submission time.
  • Use custom rules for domain-specific requirements. Override defaults when your system has different strength requirements.

Don't

  • Don't enforce excessive complexity rules. Studies show very complex requirements (special char + no sequences) lead to weaker passwords overall.
  • Don't use InputPassword for confirm-password fields. The rules list is confusing for a repeat-entry field — pass rules={[]} or use a plain input.
  • Don't disable the show/hide button. Accessibility guidelines recommend always allowing password visibility.

Developer Reference

Props & Accessibility

  • label(optional, default: "Password") — rendered as a linked <Label>.
  • rules (optional, default: 5 built-in rules) — array of PasswordRule objects.
  • PasswordRule: { key: string; label: string; test: (value: string) => boolean }
  • Supports controlled mode via value + onChange, or uncontrolled via defaultValue.
  • The rules list has aria-label="Password requirements". The eye button has a descriptive aria-label that updates with state.
  • aria-invalid is set automatically when the user has typed and not all rules pass.

Usage

import { OriginInputPassword } from "@/components/branding/origin-ui-input-password"

// Default rules (8+ chars, uppercase, lowercase, number, special char)
<OriginInputPassword
  label="Create Password"
  placeholder="Enter a strong password"
/>

// Custom rules
<OriginInputPassword
  label="New Password"
  rules={[
    { key: "length", label: "At least 12 characters", test: (v) => v.length >= 12 },
    { key: "upper", label: "One uppercase letter", test: (v) => /[A-Z]/.test(v) },
    { key: "digit", label: "Two numbers", test: (v) => (v.match(/\d/g) || []).length >= 2 },
  ]}
/>

// No rules (confirm password, login)
<OriginInputPassword
  label="Confirm Password"
  rules={[]}
/>

// Controlled
<OriginInputPassword
  label="Password"
  value={password}
  onChange={(e) => setPassword(e.target.value)}
/>