What it does

A complete "enter the code we sent you" card with four pieces in a row, each with a dovetail tab on one side and the matching socket on the other. A glowing outline in the shape of the piece glides to the one that takes the next digit, and each digit stamps down into its piece. While the code is checked, a light runs along the row, piece by piece and gap by gap. A wrong code makes the pieces lunge to join, but every other one sits a little high or low, so the tabs knock against the edges and the row springs back apart in red while the digits drop out. A right one lifts every other piece, slides the row shut underneath and presses each lifted piece down into its sockets with a small flash at each joint. The row becomes one green bar, the joints fade to a faint inlay, a check draws across it and a Continue button rises.

Good for

Two-step sign-in, email and phone confirmation, PIN-style confirmations, any screen that asks for a short one-time code and deserves a moment at the end.

How it works

One real input sits invisibly over the pieces, so paste, SMS autofill and screen readers work the usual way. Each piece is an SVG outline drawn from its measured size, so the tabs fit at any size, from desktop down to a 320px phone. Your check runs as soon as the last digit is in, and its answer picks the ending. The code length follows the number of pieces in the markup. A resend button counts down before it can be pressed.

How to use

Copy two files, paste the markup, pass your own onComplete(code).

Specs

Price

$5, one payment

Version

1.0.0

Code size

11 KB gzipped

Dependencies

None

Built with

HTML, CSS, JavaScript

Category

Form

Licence

Unlimited personal and client projects

In the zip

• dovetail.css dovetail.jsthe component
• index.htmla plain example page
• README.md package.json vite.config.js LICENSE.md

Use it in your project

import { init } from './dovetail.js';

const dovetail = init(document.querySelector('.dovetail'), {
  onComplete: async (code) => {
    const res = await fetch('/api/verify', { method: 'POST', body: JSON.stringify({ code }) });
    if (!res.ok) throw new Error('That code has expired. Send a new one.'); // shown under the row
  },
  onResend: () => fetch('/api/send-code', { method: 'POST' }),
  onContinue: () => { location.href = '/dashboard'; },
});

useEffect(() => {
  const dovetail = init(ref.current, { onComplete });
  return () => dovetail.destroy();
}, []);

Questions

Still have a question? Email us. The person who made it answers.