ContextQMD
Back to Daisyui

OTP

packages/docs/src/routes/(routes)/components/otp/+page.md

5.6.07.7 KB
Original Source
<script> import Component from "$components/Component.svelte" import Translate from "$components/Translate.svelte" </script>

~OTP

Make sure the number of spans matches the maxlength and the pattern of the input field. In this example, we have 4 spans for a 4-digit OTP.

<label class="otp"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label>
html
<label class="$$otp">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

~OTP with 6 digits

<label class="otp"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]&#123;6}" required /> </label>
html
<label class="$$otp">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="6" pattern="[0-9]{6}" required />
</label>

~OTP joined

Connects the character boxes together

<label class="otp otp-joined"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="5" pattern="[0-9]&#123;4}" required /> </label>
html
<label class="$$otp $$otp-joined">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="5" pattern="[0-9]{4}" required />
</label>

~OTP with different sizes

<div class="flex flex-col gap-4 items-center"> <label class="otp otp-xs"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-sm"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-md"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-lg"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-xl"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> </div>
html
<label class="$$otp $$otp-xs">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-sm">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-md">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-lg">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-xl">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

~OTP with different colors

<div class="flex flex-col gap-4 items-center"> <label class="otp otp-neutral"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-primary"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-secondary"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-accent"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-info"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-success"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-warning"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> <label class="otp otp-error"> <span></span> <span></span> <span></span> <span></span> <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]&#123;4}" required /> </label> </div>
html
<label class="$$otp $$otp-neutral">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-primary">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-secondary">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-accent">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-info">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-success">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-warning">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>

<label class="$$otp $$otp-error">
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <input type="text" autocomplete="one-time-code" inputmode="numeric" maxlength="4" pattern="[0-9]{4}" required />
</label>