Build a password requirements checklist

Loading problem workspace…

Build a password requirements checklist · UIHero

Build a password requirements checklist

Evaluate configurable password rules live with semantic status and a concise accessible announcement.

EasyReact Forms

30 min0% acceptance

Description

Build PasswordRequirements around a password and an immutable rule list. Every rule updates as the value changes, completion requires all rules, visual statuses have text equivalents, and assistive technology receives useful progress without noisy repeated announcements.

Requirements

The solution exports the required PasswordRequirements API from the editable module.
Live rules works deterministically for the documented normal, boundary, and repeated-use scenarios.
All rules required works deterministically for the documented normal, boundary, and repeated-use scenarios.
Status semantics works deterministically for the documented normal, boundary, and repeated-use scenarios.
Aria live works deterministically for the documented normal, boundary, and repeated-use scenarios.
Visibility policy works deterministically for the documented normal, boundary, and repeated-use scenarios.
Immutable rules works deterministically for the documented normal, boundary, and repeated-use scenarios.

Partial completion

Input

Password ocean7

Expected output

Length and number are marked met; symbol remains not met

Explanation

The live summary announces two of three rules met without reading every unchanged rule.

Constraints

Accept an immutable configurable rule list
Do not hide unmet rules while typing
Expose status through text as well as color or icons

Hints

Hint 1

Derive rule results from props instead of mirroring them into state.

Hint 2

Use one concise aria-live summary for progress and semantic text within each list item.

Hint 3

Never reorder or modify the caller's rule array.

Reactvalidationaccessibility

Loading problem workspace…