A password field with a strength meter that updates as you type.
Framer's native form fields are Text, Checkbox, Radio and Select only — there is no password field and no way to show strength. This adds both, with no external dependency.
What it does. Five checks run on every keystroke — length, lowercase, uppercase, number, symbol. The bar fills, the colour shifts, and the checklist ticks off as each one passes. Set how many checks must pass before a password counts as accepted.
14 properties, all on the canvas: Placeholder · Require · Show / hide toggle · Checklist · Labels · Colors · Bar height · Gap · Radius · Size · Text · Muted · Field · Border
Labels and colours are comma-separated lists, so you can rename the tiers or match your palette without touching code.
Built to behave: screen readers get the verdict as text, not as coloured bars. Each instance keeps its own label association, so several on one page never collide.
Any layout width · auto height.
A password field with a strength meter that updates as you type.
Framer's native form fields are Text, Checkbox, Radio and Select only — there is no password field and no way to show strength. This adds both, with no external dependency.
What it does. Five checks run on every keystroke — length, lowercase, uppercase, number, symbol. The bar fills, the colour shifts, and the checklist ticks off as each one passes. Set how many checks must pass before a password counts as accepted.
14 properties, all on the canvas: Placeholder · Require · Show / hide toggle · Checklist · Labels · Colors · Bar height · Gap · Radius · Size · Text · Muted · Field · Border
Labels and colours are comma-separated lists, so you can rename the tiers or match your palette without touching code.
Built to behave: screen readers get the verdict as text, not as coloured bars. Each instance keeps its own label association, so several on one page never collide.
Any layout width · auto height.
