A one-time password input with individual character boxes.
Verify your Code
We sent a 6-digit code to l***@email.com
Code expires in 09:24
<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 |
otp-fields | Flex row of input boxes |
otp-box | Single character input (48×56px) |
otp-box.filled | Box with a digit entered |
otp-sep | Visual group separator |
otp-dk | Dark mode modifier |