PasswordStrengthMeter

Presentational password-strength meter — a segmented bar driven by a numeric score. Domain-agnostic: no scoring policy and no enforcement (that lives in the feature, mirroring the backend rule); this only visualizes a value.

import { PasswordStrengthMeter } from "@evolve-storefront/ui/password-strength-meter";

Preview

DefaultOpen in Storybook ↗

Usage

The meter for a scored password. Leave out label for bars only, where the caption is shown elsewhere.

// The feature scores the password; the meter only shows the result.
<PasswordStrengthMeter
  score={strength.score}
  max={4}
  label={t("strength", { level: t(strength.level) })}
/>;

Props

Prop	Type	Description
score	number	Current strength, 0–max. Scoring policy lives with the caller.
max?	number	Number of segments / the maximum score.
label?	ReactNode	Caption + accessible value text (e.g. a localized "Strength: strong"). ui carries no i18n, so the host passes the resolved string. Omit to render bars only.

Any other props go to the root element, like on a plain HTML element.

Examples

Variants

// One segment per point of score; the lowest level warns.
<PasswordStrengthMeter score={1} label={t("strengthWeak")} />
<PasswordStrengthMeter score={4} label={t("strengthStrong")} />

Open in Storybook ↗