Password Input

1import { Field, PasswordInput } from '@/ui/Input'23// Sign in: the password already exists, so no meter and no rules.4<Field label="Password">5  <PasswordInput autoComplete="current-password" name="password" />6</Field>78// Sign up: new-password lets the manager offer to generate one.9<Field10  label="New password"11  description="At least 12 characters, mixed case, and a number or symbol."12>13  <PasswordInput autoComplete="new-password" name="new-password" />14</Field>1516// Caps Lock: read the modifier state from the event, only while focused.17const [caps, setCaps] = React.useState(false)18<input19  onKeyUp={(e) => setCaps(e.getModifierState('CapsLock'))}20  onKeyDown={(e) => setCaps(e.getModifierState('CapsLock'))}21  onBlur={() => setCaps(false)}22/>2324// Preserve the caret across the type swap. The naive version sends the25// cursor to the end every time the user peeks.26function toggleReveal(el: HTMLInputElement) {27  const { selectionStart, selectionEnd } = el28  setRevealed((r) => !r)29  requestAnimationFrame(() => el.setSelectionRange(selectionStart, selectionEnd))30}

<div class="ds-field">
  <label for="pw">New password</label>

  <!-- Read BEFORE typing, not discovered through failure. -->
  <ul id="pw-rules">
    <li>At least 12 characters</li>
    <li>Upper and lower case</li>
    <li>A number or symbol</li>
  </ul>

  <div class="ds-password">
    <input
      id="pw"
      type="password"
      name="new-password"
      autocomplete="new-password"
      aria-describedby="pw-rules pw-strength"
    />
    <!-- No maxlength. No onpaste handler. Both are anti-features. -->
    <button type="button" aria-label="Show password" aria-pressed="false">
      <svg aria-hidden="true">…</svg>
    </button>
  </div>

  <p id="pw-strength" role="status" aria-live="polite">Strength: Good</p>
  <p id="pw-caps" role="status" aria-live="polite" hidden>Caps Lock is on.</p>
</div>

.ds-password { position: relative; }

.ds-password input {
  inline-size: 100%;
  block-size: 36px;
  padding-inline: 12px 40px;         /* room for the reveal toggle */
  border: 1px solid var(--ds-border-interactive);
  border-radius: var(--radius-md);
  background: var(--ds-surface-inset);
  /* Never set -webkit-text-security or a custom mask character: it is what
     password managers and screen readers detect. */
}

.ds-password button {
  position: absolute;
  inset-inline-end: 6px;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 28px;
  block-size: 28px;
  color: var(--ds-fg-muted);         /* 4.5:1 — it is a control */
}

.ds-password input[aria-invalid='true'] { border-color: var(--ds-danger-border); }
.ds-password[data-caps='true'] input   { border-color: var(--ds-warning-border); }

/* Colour is never the only signal: the label says "Weak" or "Strong" too. */
.ds-strength__bar { block-size: 4px; border-radius: 999px; }
.ds-strength__bar[data-level='1'] { background: var(--ds-danger); }
.ds-strength__bar[data-level='4'] { background: var(--ds-success); }

@media (pointer: coarse) {
  .ds-password input  { block-size: 44px; padding-inline-end: 48px; }
  .ds-password button { inline-size: 44px; block-size: 44px; }
}