Contraseña con ojo
Un campo de contraseña con un botón de ojo; una raya se retira del ojo al mostrar la contraseña.
Ajustes
Código
<label class="uv-ip"><input type="password" value="secreto123"><button type="button" aria-label="Mostrar contraseña"><svg viewBox="0 0 24 24"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/><path class="sl" d="M4 4l16 16" pathLength="1"/></svg></button></label>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
Dónde usarlo
Dejar ver lo que se ha escrito reduce los inicios de sesión fallidos, sobre todo en móvil. Este botón para mostrar la contraseña encaja en cualquier login o registro, en la cuenta de una tienda o en la configuración del wifi. Al tocar el ojo, la raya se borra y los puntos pasan a texto, con un poco de JavaScript.
Ponlo primero en los formularios de registro: ahí es donde un error al teclear una contraseña nueva da más problemas. El botón lleva además una etiqueta oculta para lectores de pantalla, así que quien no ve el ojo también sabe para qué sirve.