HTML + CSSInputs
Email input with live validation
Turns green with a tick for a valid email, or red with a little shake and a hint if not.
Settings
16px
1x
Code
<label class="uv-in2v"><input placeholder="you@email.com"><span class="ic"><svg class="ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg><svg class="no" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><em class="hp">Enter a valid email</em></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
Catching a typo in an email address before the form is sent saves everyone a headache. Put it in the newsletter box of a site footer, the sign-up step of an app or the guest checkout of a shop. It checks when you leave the field or press Enter, not mid-typing. Email validation in HTML, CSS and JavaScript.
It only checks the format, not whether the address really exists, so keep validating on your server too. Rewrite the hint in your own words; “Looks like a letter is missing” feels kinder than a stiff error.