Preview Updated 2026-05-10

Password strength

Password input + 4-segment strength bar + live requirements list + show/hide toggle.

Basic usage

Defaults to 4 rules (8+ chars / uppercase / digit / symbol). Override via requirements.

src/App.vue vue

<CfPasswordStrength v-model="pwd" />

src/App.tsx tsx

<CfPasswordStrength value={pwd} onChange={setPwd} />

Pass requirements to replace the 4 default rules. Each entry is { label, test }.

src/App.vue vue

<CfPasswordStrength v-model="pwd" :requirements="rules" />

src/App.tsx tsx

<CfPasswordStrength value={pwd} onChange={setPwd} requirements={rules} />

Prop	Type	Default	Description
`modelValue` / `v-model` (Vue), `value/onChange` (React)	`string`	`''`	Password value
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`placeholder`	`string`	`'Enter password'`
`disabled`	`boolean`	`false`
`showToggle`	`boolean`	`true`	Show eye toggle for visibility
`requirements`	`PasswordRequirement[]`	`defaultPasswordRequirements`	`{ label, test }[]`