Escribe una contraseña
- 8 caracteres o más
- Una mayúscula
- Un número
- Un símbolo
Password strength meter
A four-step bar and a list of requirements that tick off one by one as you type.
Settings
Code
<div class="uv-ipw"><label for="uv-ipw-in">Password</label><div class="fd"><input id="uv-ipw-in" type="password" autocomplete="new-password" placeholder="At least 8 characters"></div><div class="mt" aria-hidden="true"><i></i><i></i><i></i><i></i></div><p class="lv" aria-live="polite">Type a password</p><ul><li data-r="len"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>8 characters or more</span></li><li data-r="up"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>One uppercase letter</span></li><li data-r="num"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>One number</span></li><li data-r="sym"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg><span>One symbol</span></li></ul></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
Sign-up forms convert better when people know what a good password looks like before they submit. This field shows a four-segment meter that fills and changes from red through amber to green, a word describing the strength, and four requirements that turn into ticks as each rule is met: length, an uppercase letter, a number and a symbol.
The strength label is an aria-live region, so screen readers hear it change. Adjust the rules in the script to match your backend, and use the two colors for strong and weak states to fit your brand.