Requirement Summary - Everyday Interface Patterns

A static password requirement summary shows 12 characters, letter and number, different from last password, and Requirements shown status.

Program

Password requirement summaries should show the rules before entry or submit without validating anything.

password_requirement_summary.html

Visuals: captured from real browser rendering

<section class="password-requirements" aria-labelledby="password-requirements-title"><h2 id="password-requirements-title">Password requirement summary</h2><dl>
  <div><dt>Minimum</dt><dd>12 characters</dd></div>
  <div><dt>Character mix</dt><dd>Letter and number</dd></div><div><dt>Reuse rule</dt><dd>Different from last password</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Requirements shown</span></dd></div></dl>
  <p class="check">Learner check: the rules are visible before any password is entered.</p>
  <p class="note">Static requirements only; no password validation, auth service, credential storage, policy service, route, API, network, script, form submit, analytics, timers, or live password checks run.</p></section>
<style>
  .password-requirements { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .password-requirements dl { display: grid; gap: 8px; margin: 0; }
  .password-requirements dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .password-requirements dt { color: #475569; }
  .password-requirements dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the requirement summary.
The section is labelled by its visible heading.
Show minimum length.
The minimum length is exact pinned data.
Show mix and reuse rules.
The character mix and reuse rule are exact pinned data.
Render requirements status.
The status badge says requirements are shown.
Check requirements readback.
The check says the rules are visible before any password is entered.
Check requirement honesty.
Minimum, mix rule, reuse rule, status, and no live password checks.

step flow step(1) labels the source, step(2) shows the minimum, step(3) shows mix and reuse rules, step(4) shows requirements status, step(5) checks the rule readback, and step(6) checks the honesty note.

requirement readback The section heading names the password requirement summary surface.

requirement rows Minimum, Character mix, Reuse rule, and Status values are exact pinned data.

no live checks The lesson should not imply password validation, auth services, credential storage, policy services, routes, APIs, networks, scripts, form submits, analytics, timers, or live password checks.