Fluxo UIFluxo UIv0.4.1

Password Strength Meter

A configurable strength meter with actionable tips that respects which characters your field actually accepts.

Basic Usage

Default Strength Meter

Type to see live tier and tip updates.

Weak
import { PasswordStrengthMeter } from 'fluxo-ui';

const [pw, setPw] = useState('');

<Password value={pw} onChange={(e) => setPw(e.value)} placeholder="Enter password" />
<PasswordStrengthMeter value={pw} />

Meter Styles

Meter Styles

Three visual treatments — pick the one that fits your form density.

meterStyle="segments"
Fair
Strength: Fair

Add 4 more characters to make it even stronger.

meterStyle="bar"
Fair
Strength: Fair

Add 4 more characters to make it even stronger.

meterStyle="minimal"
Fair
Strength: Fair

Add 4 more characters to make it even stronger.

<PasswordStrengthMeter value={pw} meterStyle="segments" />
<PasswordStrengthMeter value={pw} meterStyle="bar" />
<PasswordStrengthMeter value={pw} meterStyle="minimal" />

Configurable Rules

Configurable Rules

Toggle whether symbols are allowed/required and watch tips update — they only ever ask for things the field actually accepts.

Weak
814offno
<PasswordStrengthMeter
  value={pw}
  policy={{ minLength: 6, targetLength: 12, requireSymbol: false }}
  allowedChars={{ lowercase: true, uppercase: true, digits: true, symbols: false }}
  thresholds={{ fair: 30, good: 55, strong: 80 }}
/>

Integrated with Password

Integrated with Password

Pass strengthMeter (boolean or props) to render the meter inline below the input. The toggle button restores focus to the input.

Weak
<Password
  value={pw}
  onChange={(e) => setPw(e.value)}
  autoComplete="new-password"
  strengthMeter={{
    policy: { minLength: 10, requireSymbol: true },
    meterStyle: 'segments',
  }}
/>

Import

import { PasswordStrengthMeter, computePasswordStrength } from 'fluxo-ui';
import type { PasswordStrengthMeterProps, PasswordPolicy, PasswordAllowedChars, PasswordRule } from 'fluxo-ui';

Props

valuereq
string

Current password value

policy
PasswordPolicy

Rule configuration: { minLength?, targetLength?, requireLowercase?, requireUppercase?, requireDigit?, requireSymbol?, forbidSequences?, forbidRepeats?, forbidCommon? }

allowedChars
{ lowercase?: boolean; uppercase?: boolean; digits?: boolean; symbols?: boolean | string }

What the field accepts. The meter only scores classes that are allowed and only emits tips that respect this

commonPasswords
string[]

Extra entries to merge into the default ~50-entry blocklist

useDefaultBlocklist
boolean"true"

Include the default common-password blocklist

thresholds
{ fair?: number; good?: number; strong?: number }"{ fair: 40, good: 65, strong: 85 }"

Score boundaries between tiers

showTips
boolean"true"

Render an actionable tip line below the meter

showLabel
boolean"true"

Render the tier label ('Weak', 'Strong', etc.)

customRules
Array<PasswordRule>

Additional rules: { id, weight, test(value), hint(value) }

meterStyle
'segments' | 'bar' | 'minimal'"'segments'"

Visual treatment

size
'sm' | 'md' | 'lg'"'md'"

Meter and font scale

id
string

HTML id attribute

className
string

Additional CSS classes

ariaLabel
string

Accessible label override

onScoreChange
(info: PasswordStrengthInfo) => void

Fires whenever the tier changes

Features

Configurable Rules

Length, character classes, allowed-symbol set, repetitions, sequences, and a common-password blocklist.

Allowed-aware Tips

When the field disallows symbols, the meter never asks for one. Tips reflect what the field actually accepts.

Three Visual Styles

Segments (default), bar, or minimal — pick what matches your form density.

Accessible

Tier changes are announced via a polite live region; the bar itself is decorative.