Fluxo UIFluxo UIv0.4.1

Password Requirements

A live, configurable rules checklist that tells users exactly what they need to type — with optional confirm-password and bundled strength meter.

Basic Usage

Default Requirements List

Type in both fields and watch each rule check itself off live.

  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
  • No more than 2 of the same character in a row
  • No sequential runs of 4+ characters (e.g. abcd, 1234)
  • Passwords match
0 of 8 requirements met
import { Password, PasswordRequirements } from 'fluxo-ui';

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

<Password value={pw} onChange={(e) => setPw(e.value)} autoComplete="new-password" />
<Password value={cpw} onChange={(e) => setCpw(e.value)} autoComplete="new-password" placeholder="Confirm password" />

<PasswordRequirements
  value={pw}
  confirm={cpw}
  policy={{
    minLength: 8,
    minLowercase: 1,
    minUppercase: 1,
    minDigits: 1,
    minSymbols: 1,
    maxConsecutiveRepeat: 2,
    maxConsecutiveSequence: 4,
  }}
/>

Variants × Icons

Variants × Icon Styles

Three visual variants × three icon styles. Pick what fits your form layout.

variant="list" iconStyle="check"
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="list" iconStyle="dot"
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="list" iconStyle="numeric"
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • 4At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="inline" iconStyle="check"
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="inline" iconStyle="dot"
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="inline" iconStyle="numeric"
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • 4At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="card" iconStyle="check"
Requirements
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="card" iconStyle="dot"
Requirements
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
variant="card" iconStyle="numeric"
Requirements
  • At least 8 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • 4At least one number (0–9)
  • At least one symbol (! " # $ % & …)
4 of 5 requirements met
<PasswordRequirements value={pw} variant="list" iconStyle="check" policy={policy} />
<PasswordRequirements value={pw} variant="inline" iconStyle="dot" policy={policy} />
<PasswordRequirements value={pw} variant="card" iconStyle="numeric" policy={policy} title="Password rules" />

Configurable Policy

Live Policy Tuning

Drive every built-in rule with controls so you can see how each setting changes the checklist.

  • At least 12 characters
  • No more than 64 characters
  • At least 2 lowercase letters (a–z)
  • At least 2 uppercase letters (A–Z)
  • At least 2 numbers (0–9)
  • At least one symbol (! @ # $ % & …)
  • No whitespace characters
  • No more than 2 of the same character in a row
  • No sequential runs of 4+ characters (e.g. abcd, 1234)
0 of 9 requirements met
1217on24
<PasswordRequirements
  value={pw}
  policy={{
    minLength: 12,
    maxLength: 64,
    minLowercase: 2,
    minUppercase: 2,
    minDigits: 2,
    minSymbols: 1,
    allowedSymbols: '!@#$%&*',
    forbidWhitespace: true,
    maxConsecutiveRepeat: 2,
    maxConsecutiveSequence: 4,
  }}
/>

Custom Rules

Custom Rules & Label Overrides

Add any rule the policy doesn't cover, and override built-in labels with the labels prop.

  • Be at least 8 characters
  • Include a digit
  • Doesn't contain '@'
  • Starts with a letter
  • Doesn't contain '2024' or '2025'
0 of 5 requirements met
<PasswordRequirements
  value={pw}
  policy={{ minLength: 8 }}
  customRules={[
    { id: 'noEmail', label: "Doesn't contain '@'", test: (v) => !v.includes('@') },
    { id: 'startsLetter', label: 'Starts with a letter', test: (v) => /^[A-Za-z]/.test(v) },
    { id: 'noYear', label: "Doesn't contain '2024' or '2025'", test: (v) => !/(2024|2025)/.test(v) },
  ]}
  labels={{ minLength: 'Be at least 8 characters' }}
/>

Numeric PIN

Numeric PIN Use Case

numericOnly + min/max length + repeat/sequence limits — perfect for a banking PIN form.

Set a 6-digit PIN
  • At least 6 characters
  • No more than 6 characters
  • No more than 2 of the same character in a row
  • No sequential runs of 3+ characters (e.g. abcd, 1234)
  • Only digits (0–9)
0 of 5 requirements met
<PasswordRequirements
  value={pin}
  policy={{
    numericOnly: true,
    minLength: 6,
    maxLength: 6,
    maxConsecutiveRepeat: 2,
    maxConsecutiveSequence: 3,
  }}
  variant="card"
  title="Set a 6-digit PIN"
/>

With Strength Meter

Embedded Strength Meter

Set showStrengthMeter to bundle the strength meter inside the requirements component.

Create a strong password
  • At least 10 characters
  • At least one lowercase letter (a–z)
  • At least one uppercase letter (A–Z)
  • At least one number (0–9)
  • At least one symbol (! " # $ % & …)
  • No more than 2 of the same character in a row
  • No sequential runs of 4+ characters (e.g. abcd, 1234)
  • Passwords match
0 of 8 requirements met
Weak
<PasswordRequirements
  value={pw}
  confirm={cpw}
  showStrengthMeter
  strengthMeterProps={{ meterStyle: 'segments' }}
  policy={{ minLength: 10, minLowercase: 1, minUppercase: 1, minDigits: 1, minSymbols: 1 }}
  variant="card"
  title="Create a strong password"
/>

Import

import { PasswordRequirements } from 'fluxo-ui';
import type { PasswordRequirementsProps, PasswordRequirementsPolicy, PasswordRequirementsRule } from 'fluxo-ui';

Props

valuereq
string

Current password value

confirm
string

Optional confirm-password value. When provided, the equality rule is enabled by default

policy
PasswordRequirementsPolicy

Built-in rules. All keys are optional — only enabled rules appear in the UI: { minLength?, maxLength?, minLowercase?, minUppercase?, minDigits?, minSymbols?, allowedSymbols?, forbidWhitespace?, maxConsecutiveRepeat?, maxConsecutiveSequence?, requireMatch?, onlyAlphaNumeric?, numericOnly?, customCharSet? }

customRules
Array<{ id, label, test(value, confirm?), hint? }>

Additional rules merged below the built-in ones

labels
Partial<Record<string, string>>

Override the wording of any built-in or custom rule by id

showStrengthMeter
boolean"false"

Render the bundled PasswordStrengthMeter below the checklist

strengthMeterProps
Omit<PasswordStrengthMeterProps, 'value'>

Forwarded to the embedded PasswordStrengthMeter

variant
'list' | 'inline' | 'card'"'list'"

Visual treatment

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

Compact, comfortable, or relaxed scale

iconStyle
'check' | 'dot' | 'numeric'"'check'"

Visual treatment of the satisfied state

hideOnMet
boolean"false"

Collapse satisfied rules out of view (still announced once for SR)

title
string

Header for the 'card' variant

onChange
(info: PasswordRequirementsInfo) => void

Fires when any rule's met state changes

id
string

HTML id attribute

className
string

Additional CSS classes

ariaLabel
string

Accessible label override

Features

Every Rule Configurable

Length, character classes, allowed symbol set, repeats, sequences, alpha-numeric only, numeric only, custom char set, match.

Live Per-Rule State

Every rule shows met/unmet status the instant the user types. Length-based rules also show progress like 5/8.

3 Layouts × 3 Icons

List, inline chips, or boxed card — paired with checkmarks, dots, or numbered icons.

Strength Meter Slot

Toggle the bundled PasswordStrengthMeter on with one prop and forward any meter config.

Custom Rules

Add any rule the policy does not cover via customRules — receives both the value and confirm.

Optional & Composable

Use stand-alone or alongside Password — entirely opt-in, never forced on consumers.