HTML + CSSInputs
Password reveal with line
An eye button reveals the password, and a line draws across the icon to show it is visible.
Settings
16px
1x
Code
<label class="uv-in2p"><input type="password" placeholder="Password" value="secreto123"><button class="ey"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M2 12s3.8-6 10-6 10 6 10 6-3.8 6-10 6-10-6-10-6z"/><circle cx="12" cy="12" r="2.8"/><path class="sl" d="M4 20L20 4"/></svg></button></label>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
Where to use it
Letting people see what they typed saves a lot of failed logins, especially on phones. Use it on the sign-in page of an app, when creating an account or in the Wi-Fi step of a smart device setup. The slash over the eye makes the state obvious. A show-password input in HTML, CSS and a little JavaScript.
Give the eye button an accessible name such as “Show password”, so screen readers can announce it. On a sign-up form, pair it with a short hint about the rules instead of an error after submitting.