CSS Showcase · Live Demo
Six boxes, zero friction.
A one-time-code field that auto-advances, backspaces between cells, and splits pasted codes — six plain inputs with autocomplete="one-time-code", no library.
Featured demo
mobile · big-cellsVerification code
taller cells, bigger digits — thumb-friendly.
mobile design patterns
otp-big-cells.css
/* Large code cells for touch */
.otp-big { display: flex; gap: 0.45rem; }
.otp-big input {
inline-size: 2.6rem;
block-size: 4rem;
text-align: center;
font-size: 1.5rem;
font-weight: 800;
font-variant-numeric: tabular-nums;
border: 1px solid var(--border);
border-radius: 0.9rem;
background: var(--card);
caret-color: var(--primary);
}
.otp-big input:focus-visible {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.otp-big input[data-filled="true"] {
border-color: color-mix(in srgb, var(--primary) 55%, var(--border));
background: color-mix(in srgb, var(--primary) 6%, var(--card));
}CSS features used
- • inputMode="numeric"
- • autocomplete="one-time-code"
- • caret-color
- • data-filled state
- • prefers-reduced-motion
- • Semantic tokens