Float Label
A copy-paste form states component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Form StatesHTMLCSSany framework
Copy into your project
HTML
<!-- Float Label — placeholder=" " is required for the :placeholder-shown trick -->
<label class="nuda-float">
<input class="nuda-float__input" type="email" placeholder=" " />
<span class="nuda-float__label">Email</span>
</label>CSS
/* Float Label
Label slides up and shrinks on focus or when filled.
Customize: --float-accent, --float-bg, --float-radius */
.nuda-float {
--float-accent: #e4ff54;
--float-bg: rgba(255, 255, 255, 0.03);
--float-radius: 8px;
position: relative;
display: block;
width: 100%;
max-width: 240px;
}
.nuda-float__input {
width: 100%;
padding: 16px 14px 6px;
background: var(--float-bg);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--float-radius);
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-float__input:focus {
border-color: var(--float-accent);
box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.12);
}
.nuda-float__label {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
color: #a1a1aa;
pointer-events: none;
transition:
transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
font-size 0.25s,
color 0.25s;
}
.nuda-float__input:focus ~ .nuda-float__label,
.nuda-float__input:not(:placeholder-shown) ~ .nuda-float__label {
transform: translateY(-140%) scale(0.8);
color: var(--float-accent);
left: 12px;
}How to use Float Label
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.