Loading…
Live component · try it
Freeinput · type · light
OTP Boxes Input
Six boxes for a verification code: typing fills one and jumps to the next, Backspace steps back, arrow keys move, and pasting a whole code fills every box at once. The active box lifts with an accent ring and the set pulses green when the code is complete.
The mechanic
On `input` the box's last digit is kept, written into the hidden field, and focus moves forward; Backspace on an empty box moves back and clears; `paste` splits the clipboard digits across the boxes from the current one. The focused box gets `translateY(−2px)` and a 2 px accent ring (0.15 s); when all six are filled the group gets `.done` and a 0.5 s green ring pulse.
How to use it
From prompt to a block in your page.
- 01Try the component
The preview is the shipped element inside a neutral demo page. Hover, click, focus: the one interaction it is about is live.
- 02Pick a palette
Token sets re-tint it live. The prompt carries the one you chose.
- 03Pick your stack
A paste-in snippet, or a component for Next.js, React, Vue, Astro, WordPress, Shopify or Webflow.
- 04Copy the prompt
It quotes the markup, styles and script verbatim with the tokens and the rules that keep it self-contained.
- 05Mount it in your layout
It inherits your page's font and width; the tokens live on :root; several instances share one script.
