Password Strength Meter
Password Strength Meter is a form in the UI HUB forms collection. A password input with a show/hide toggle plus a 5-segment strength bar that fills and recolors with standard semantic colors (red to emerald) as criteria pass, alongside a live checklist with check/cross icons.
The component is driven by 8 documented props (value, onChange, showChecklist, label, placeholder, criteria and 2 more), so colours, intensity, timing and density can be tuned from the call site instead of being hard-coded.
Implementation notes: criteria scoring; controlled/uncontrolled value; semantic status colors.
Preview the form in the browser above, copy the source, and paste it into your project. Forms components in UI HUB are grouped by category so you can compare effects side by side before choosing one.