Input OTP

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

← Previous Empty State Next → Label