Escribe una contraseña
- 8 caracteres o más
- Una mayúscula
- Un número
- Un símbolo
Contraseña con medidor de fuerza
Una barra de cuatro tramos y una lista de requisitos que se van marcando uno a uno mientras escribes.
Ajustes
Código
<div class="uv-ipw"><label for="uv-ipw-in">Contraseña</label><div class="fd"><input id="uv-ipw-in" type="password" autocomplete="new-password" placeholder="Mínimo 8 caracteres"></div><div class="mt" aria-hidden="true"><i></i><i></i><i></i><i></i></div><p class="lv" aria-live="polite">Escribe una contraseña</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 caracteres o más</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>Una mayúscula</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>Un número</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>Un símbolo</span></li></ul></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Inputs
Ver todos: InputsDónde usarlo
Los formularios de registro convierten mejor cuando la gente sabe cómo es una buena contraseña antes de enviar. Este campo muestra un medidor de cuatro tramos que se llena y pasa de rojo a ámbar y a verde, una palabra que describe la fuerza y cuatro requisitos que se convierten en checks al cumplirse: longitud, una mayúscula, un número y un símbolo.
La etiqueta de fuerza es una región aria-live, así que los lectores de pantalla oyen el cambio. Ajusta las reglas del script a las de tu backend y usa los dos colores para los estados fuerte y débil.