File Validation Error
A copy-paste file upload component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
File UploadHTMLCSSany framework
Copy into your project
HTML
<div class="nuda-valerr" role="alert">
<svg class="nuda-valerr__icon" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<path d="M10.3 3.86a2 2 0 0 1 3.4 0l8.3 13.92A2 2 0 0 1 20.3 21H3.7a2 2 0 0 1-1.7-3.22z"
stroke-linejoin="round" />
<path d="M12 9v4M12 17h.01" stroke-linecap="round" />
</svg>
<div class="nuda-valerr__meta">
<p class="nuda-valerr__title">File type not allowed</p>
<p class="nuda-valerr__msg">
<code>script.exe</code> · accepted: PDF, PNG, JPG, DOCX
</p>
</div>
</div>CSS
/* File Validation Error
Inline message for blocked extensions or oversize files. */
.nuda-valerr {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.7rem 0.85rem;
background: rgba(255, 94, 122, 0.06);
border: 1px solid rgba(255, 94, 122, 0.4);
border-left: 3px solid #ff5e7a;
border-radius: 8px;
min-width: 280px;
}
.nuda-valerr__icon {
width: 18px;
height: 18px;
color: #ff5e7a;
flex-shrink: 0;
margin-top: 1px;
}
.nuda-valerr__meta { flex: 1; min-width: 0; }
.nuda-valerr__title {
margin: 0;
font-size: 0.82rem;
color: #fafafa;
font-weight: 600;
}
.nuda-valerr__msg {
margin: 0.15rem 0 0;
font-size: 0.74rem;
color: #a0a0a8;
}
.nuda-valerr__msg code {
padding: 1px 5px;
background: rgba(255, 94, 122, 0.12);
color: #ff5e7a;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.72rem;
}How to use File Validation Error
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.