Validation Check
A copy-paste form states component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Form StatesHTMLCSSany framework
Copy into your project
HTML
<!-- Validation Check (toggle .is-valid on the parent) -->
<label class="nuda-valid is-valid">
<input class="nuda-valid__input" type="email" />
<svg class="nuda-valid__icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2.5"
stroke-linecap="round" stroke-linejoin="round">
<path d="M5 12 L10 17 L20 7" />
</svg>
</label>CSS
/* Validation Check
Animated check that pops in and draws when the input becomes valid.
Customize: --valid-color, --valid-bg */
.nuda-valid {
--valid-color: #e4ff54;
position: relative;
display: block;
width: 100%;
max-width: 240px;
}
.nuda-valid__input {
width: 100%;
padding: 10px 40px 10px 14px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
color: #fafafa;
font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
outline: none;
transition: border-color 0.25s, box-shadow 0.25s;
}
.nuda-valid.is-valid .nuda-valid__input {
border-color: var(--valid-color);
box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.12);
}
.nuda-valid__icon {
position: absolute;
right: 12px;
top: 50%;
width: 18px;
height: 18px;
color: var(--valid-color);
transform: translateY(-50%) scale(0);
opacity: 0;
stroke-dasharray: 30;
stroke-dashoffset: 30;
}
.nuda-valid.is-valid .nuda-valid__icon {
transform: translateY(-50%) scale(1);
opacity: 1;
stroke-dashoffset: 0;
transition:
transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.25s,
stroke-dashoffset 0.5s ease-out 0.15s;
filter: drop-shadow(0 0 4px rgba(228, 255, 84, 0.4));
}How to use Validation Check
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.