Password strength meters
Password strength, measured honestly.
Passcore estimates how hard a password is to guess, checks it against your rules and tells people what to fix, in their own language. A tiny core with no dependencies, plus ready-made meters for jQuery, plain JavaScript, React, Vue and Svelte.
Try it
@passcore/vanilla- Estimate
- 0 bits
- Level
- —
- Rules
- —
Or try one of these:
Everything runs in your browser: nothing you type here leaves this page.
Signup forms
Show every requirement
Every result lists each enabled rule and whether it passes, so the checklist people expect on a signup form takes a few lines with any binding. Try a username, then a password that contains it.
Build it with
Create an account
Requirements
- At least 8 characters , met , not met
- Not a common password , met , not met
- No personal details, like your username , met , not met
- A lowercase letter , met , not met
- An uppercase letter , met , not met
- A number , met , not met
- A symbol , met , not met
7 requirements to meet
Why Passcore
Honest numbers, clear words, any framework
-
Estimates, not wishful thinking
Length comes first. Repeats, sequences, keyboard runs and common passwords are worth almost nothing, even in leetspeak:
P@ssw0rd!is not a strong password. -
Rules people understand
Minimum length, character classes, common passwords and personal details. The first rule that fails becomes the message, so people know what to fix next.
-
Accessible markup
A real
role="meter"with a spoken value, a polite live region for the message, andaria-describedbytying the field to it. -
In any language
Texts in i18next’s JSON format, plural forms included. English, Spanish and Catalan ship with every binding, or bring your own
t. -
Themed with seven properties
Colours, track and height are CSS custom properties: match your design system without fighting specificity.
-
A core with no dependencies
@passcore/coretouches no DOM and holds no texts: it returns data and message keys, so it runs anywhere, servers included.
Bindings
Pick your stack
Every binding renders the same markup with the same stylesheet, so moving between frameworks doesn’t change what people see.
-
Core
@passcore/coreEverything the estimate returns, with every option at hand. Open the inspector -
jQuery
@passcore/jquery$.fn.password()on any input, with events and a meter that slides in. See the demos -
Vanilla JS
@passcore/vanillaA function and a<passcore-meter>custom element. No framework needed. See the demos -
React
@passcore/reactA controlled component and theusePasswordStrength()hook. See the demos -
Vue
@passcore/vueA component and a composable, for Vue 3.5 and later. See the demos -
Svelte
@passcore/svelteA component and a rune-based helper, for Svelte 5. See the demos
Get started
Install
Pick a package and your package manager; the command and a first snippet follow.
pnpm add @passcore/core
import { createMeter } from '@passcore/core'
const meter = createMeter({ rules: { minLength: 10 } })
const result = meter.evaluate(password, [username])
result.percent // 0 to 100
result.message // { key: 'rule.minLength', params: { min: 10 } }pnpm add @passcore/jquery jquery
import $ from 'jquery'
import '@passcore/jquery'
import '@passcore/jquery/styles.css'
$('#password').password({ userInputs: ['#username'] })pnpm add @passcore/vanilla
import { createPasswordMeter } from '@passcore/vanilla'
import '@passcore/vanilla/styles.css'
createPasswordMeter('#password', { showPercent: true })pnpm add @passcore/react
import { PasswordStrengthMeter } from '@passcore/react'
import '@passcore/react/styles.css'
<PasswordStrengthMeter password={password} showPercent />pnpm add @passcore/vue
<script setup>
import { PasswordStrengthMeter } from '@passcore/vue'
import '@passcore/vue/styles.css'
</script>
<template>
<PasswordStrengthMeter :password="password" show-percent />
</template>pnpm add @passcore/svelte
<script>
import { PasswordStrengthMeter } from '@passcore/svelte'
import '@passcore/svelte/styles.css'
</script>
<PasswordStrengthMeter {password} showPercent />