Input OTP

Segmented one-time-password entry with a blinking caret.

Source: src/stylus/components/input-otp.styl

Six digits in two groups

Each .input-otp-slot is one character; .active carries the caret.

7
4
2
-
9
1
8
<div class="input-otp">
  <div class="input-otp-group">
    <div class="input-otp-slot active">7<span class="input-otp-caret"></span></div>
    <div class="input-otp-slot">4</div>
    <div class="input-otp-slot">2</div>
  </div>
  <span class="input-otp-separator">-</span>
  <div class="input-otp-group">
    <div class="input-otp-slot">9</div>
    <div class="input-otp-slot">1</div>
    <div class="input-otp-slot">8</div>
  </div>
</div>