A one-time password input with individual character boxes.
Verify Your Code
We sent a 6-digit code to l***********e@amyntagroup.com
Code expires in 09:46
Didn't get the code? Resend
<div class="otp-wrap"> <div class="otp-label">Verification code</div> <div class="otp-fields"> <input class="otp-box" maxlength="1"> <input class="otp-box" maxlength="1"> <input class="otp-box" maxlength="1"> <div class="otp-sep">—</div> <input class="otp-box" maxlength="1"> <input class="otp-box" maxlength="1"> <input class="otp-box" maxlength="1"> </div> </div>
Installation
Built with pure HTML and CSS. Include ds-shared.css in your project.
pnpm add @norbielink/ds
API Reference
Classes
| Class | Description |
|---|---|
otp-wrap | Column container, max-width 520px — the auth form width |
otp-label | 32px / 600 / line-height 38px · margin-bottom 12px |
otp-sub | 14px muted · margin-bottom 32px |
otp-fields | Flex row, gap 8px · margin-bottom 12px |
otp-box | flex:1 · aspect-ratio 1/1 (80×80 at 520px) · radius 10px · 1px #D1D5DB · 22px / 600 |
otp-box:focus | Border becomes the brand gradient via padding-box / border-box |
otp-timer | 12px muted · margin-bottom 28px |
otp-verify | Full-width gradient button, 12px 28px · radius 10px · 14px / 600 · shadow 0 4px 14px rgba(166,20,195,.25) |
otp-resend | margin-top 20px · 13px muted, link 13px / 700 gradient text, underline offset 3px |
otp-dk | Dark mode modifier |