HTML + CSSInputs
Password field with eye
A password input with an eye button; a line slides off the eye when the password is shown.
Settings
16px
1x
Code
<label class="uv-ip"><input type="password" value="secret123"><button type="button" aria-label="Show password"><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 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 cuts down on failed logins, especially on phones. This show password toggle fits any login or sign-up form, the Wi-Fi setup of a smart device or a shop account. Tap the eye and its slash draws away as the dots turn into text. A few lines of JavaScript handle the switch.
Put it on sign-up forms first: that's where a typo in a new password causes the most trouble. The button also carries a hidden label for screen readers, so people who can't see the eye still know what it does.