OTP Cells
A copy-paste form states component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Form StatesHTMLCSSany framework
4
2
7
Copy into your project
HTML
<!-- OTP Cells (toggle .is-filled / .is-active from JS) -->
<div class="nuda-otp" role="group" aria-label="One time code">
<div class="nuda-otp__cell is-filled">4</div>
<div class="nuda-otp__cell is-filled">2</div>
<div class="nuda-otp__cell is-filled">7</div>
<div class="nuda-otp__cell is-active"></div>
<div class="nuda-otp__cell"></div>
<div class="nuda-otp__cell"></div>
</div>CSS
/* OTP Cells
Six-cell code input with filled/active states + blinking cursor.
Customize: --otp-accent, --otp-bg, cell size. */
.nuda-otp {
--otp-accent: #e4ff54;
--otp-bg: rgba(255, 255, 255, 0.03);
display: flex;
gap: 8px;
}
.nuda-otp__cell {
width: 36px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: var(--otp-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 8px;
color: #fafafa;
font: 700 1.1rem ui-sans-serif, system-ui, sans-serif;
font-variant-numeric: tabular-nums;
transition:
border-color 0.25s,
box-shadow 0.25s,
transform 0.25s;
}
.nuda-otp__cell.is-filled {
border-color: rgba(228, 255, 84, 0.4);
background: rgba(228, 255, 84, 0.04);
animation: nuda-otp-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nuda-otp__cell.is-active {
border-color: var(--otp-accent);
box-shadow: 0 0 0 3px rgba(228, 255, 84, 0.15);
position: relative;
}
.nuda-otp__cell.is-active::after {
content: "";
position: absolute;
width: 1.5px;
height: 20px;
background: var(--otp-accent);
animation: nuda-otp-cursor 1s steps(2) infinite;
}
@keyframes nuda-otp-pop {
0% { transform: scale(0.6); }
100% { transform: scale(1); }
}
@keyframes nuda-otp-cursor { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.nuda-otp__cell { animation: none; }
.nuda-otp__cell.is-active::after { animation: none; }
}How to use OTP Cells
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.