PasswordMeter

Strength meter from rules

Strength feedback for a password being made. PasswordInput with meter already includes it; use it on its own under a field of your own.

Basic

Fair

• · 8+ characters not met
• ✓ Upper and lower case met
• ✓ A number met
• · A symbol not met

<script setup lang="ts">
import { ref } from "vue";
import { BlessInput, BlessPasswordMeter } from "blessing-ui";
const pw = ref("Megumi1");
</script>

<template>
  <div class="col">
    <BlessInput
      v-model="pw"
      type="password"
      placeholder="password"
      aria-label="Password"
      autocomplete="new-password"
    />
    <BlessPasswordMeter :value="pw" show-rules />
  </div>
</template>

• It counts rules passed, not real strength: a long passphrase of plain words can score "Weak" and be strong. Pass your own rules to match your server's policy, and let the server decide.
• The default symbol rule counts anything that isn't a letter or digit in any script, so a Japanese password isn't mistaken for symbols.
• showRules lists each rule; screen readers hear "met" / "not met" (ruleState) after it.

Usage

import { BlessPasswordMeter } from "blessing-ui";

API

Props

Name	Type	Default	Description
value*	string	—
rules	BlessPasswordRule[]	[ { label: "8+ characters", test: (v) => v.length >= 8 }, { label: "Upper and lower case", test: (v) => /[a-z]/.test(v) && /[A-Z]/.test(v) }, { label: "A number", test: (v) => /\d/.test(v) }, // any letter or digit in any script is not a symbol; `_` is { label: "A symbol", test: (v) => /[^\p{L}\p{N}\s]/u.test(v) }, ]	each passing rule adds one step; default: 8+ chars, lower+upper, digit, symbol
labels	string[]	["Weak", "Fair", "Good", "Strong"]
showRules	boolean	—	list the rules with pass / fail marks
ruleState	[string, string]	["met", "not met"]	read after each rule for screen readers: [met, not met]