Pin input · Panel

Basic

Examples below use Tailwind utility classes for OTP-style layouts

<div class="flex max-w-md gap-2" data-mv-pin-input="true">
  <input
    type="text"
    maxlength="1"
    inputmode="numeric"
    autocomplete="one-time-code"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    autocomplete="one-time-code"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    autocomplete="one-time-code"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    autocomplete="one-time-code"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  />
</div>

Placeholder

<div class="flex max-w-md gap-2" data-kt-pin-input="true">
  <input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="kt-input size-10 shrink-0 px-0 text-center text-sm"
    data-kt-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="kt-input size-10 shrink-0 px-0 text-center text-sm"
    data-kt-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="kt-input size-10 shrink-0 px-0 text-center text-sm"
    data-kt-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="kt-input size-10 shrink-0 px-0 text-center text-sm"
    data-kt-pin-input-item="true"
  />
</div>

Gray variant

<div class="flex max-w-md gap-2" data-mv-pin-input="true">
  <input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 border-border/80 bg-muted/40 px-0 text-center text-sm focus:bg-background"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 border-border/80 bg-muted/40 px-0 text-center text-sm focus:bg-background"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 border-border/80 bg-muted/40 px-0 text-center text-sm focus:bg-background"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 border-border/80 bg-muted/40 px-0 text-center text-sm focus:bg-background"
    data-mv-pin-input-item="true"
  />
</div>

Underline variant

<div class="flex max-w-md gap-2" data-mv-pin-input="true">
  <input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="size-10 shrink-0 border-0 border-b-2 border-border bg-transparent px-0 text-center text-sm shadow-none focus-visible:border-primary focus-visible:ring-0"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="size-10 shrink-0 border-0 border-b-2 border-border bg-transparent px-0 text-center text-sm shadow-none focus-visible:border-primary focus-visible:ring-0"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="size-10 shrink-0 border-0 border-b-2 border-border bg-transparent px-0 text-center text-sm shadow-none focus-visible:border-primary focus-visible:ring-0"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="size-10 shrink-0 border-0 border-b-2 border-border bg-transparent px-0 text-center text-sm shadow-none focus-visible:border-primary focus-visible:ring-0"
    data-mv-pin-input-item="true"
  />
</div>

Focus scale

<div class="flex max-w-md gap-2" data-mv-pin-input="true">
  <input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm transition-transform focus:scale-110"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm transition-transform focus:scale-110"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm transition-transform focus:scale-110"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm transition-transform focus:scale-110"
    data-mv-pin-input-item="true"
  />
</div>

Lengths (3, 5, 7)

<div class="flex max-w-xl flex-col gap-4">
  <div class="flex gap-2" data-mv-pin-input="true">
    <input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    />
  </div>
  <div class="flex gap-2" data-mv-pin-input="true">
    <input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    />
  </div>
  <div class="flex gap-2" data-mv-pin-input="true">
    <input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    />
  </div>
</div>

Regex subset (digits 0–3)

<div
  class="flex max-w-md gap-2"
  data-mv-pin-input="true"
  data-mv-pin-input-available-chars="[0-3]"
>
  <input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  />
</div>

Telephone number

Ten numeric cells with type="tel" and inputMode="numeric" so mobile browsers show the phone-style keypad. Paste distributes digits across cells.

Enter a 10-digit number

<div class="space-y-2">
  <p class="text-muted-foreground text-start text-xs sm:text-sm">
    Enter a 10-digit number
  </p>
  <div class="flex max-w-xl flex-wrap justify-start gap-2" data-mv-pin-input="true">
    <input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 1 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 2 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 3 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 4 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 5 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 6 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 7 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 8 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 9 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true"><input type="tel" maxlength="1" inputmode="numeric" autocomplete="off" placeholder="○" aria-label="Digit 10 of 10" class="mv-input size-9 shrink-0 px-0 text-center text-sm sm:size-10" data-mv-pin-input-item="true">
  </div>
</div>

Alphanumeric (10 characters)

<div
  class="flex max-w-2xl flex-wrap justify-start gap-2"
  data-mv-pin-input="true"
  data-mv-pin-input-available-chars="[0-9a-zA-Z]"
>
  <input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 1 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 2 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 3 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 4 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 5 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 6 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 7 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 8 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 9 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="text"
    placeholder="○"
    aria-label="Character 10 of 10"
    class="mv-input size-9 shrink-0 px-0 text-center text-sm uppercase sm:size-10"
    data-mv-pin-input-item="true"
  />
</div>

Masked (type="password")

<div class="flex max-w-md gap-2" data-mv-pin-input="true">
  <input
    type="password"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="password"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="password"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="password"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  />
</div>

iOS OTP hint

<div class="flex max-w-md gap-2" data-mv-pin-input="true">
  <input
    type="tel"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    autocomplete="one-time-code"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="tel"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    autocomplete="off"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="tel"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    autocomplete="off"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="tel"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    autocomplete="off"
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  />
</div>

Disabled

<div class="flex max-w-md gap-2" data-mv-pin-input="true">
  <input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    disabled=""
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    disabled=""
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    disabled=""
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  /><input
    type="text"
    maxlength="1"
    inputmode="numeric"
    placeholder="○"
    disabled=""
    class="mv-input size-10 shrink-0 px-0 text-center text-sm"
    data-mv-pin-input-item="true"
  />
</div>

Sizes

<div class="flex max-w-xl flex-col gap-5">
  <div class="flex gap-2" data-mv-pin-input="true">
    <input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-9 shrink-0 px-0 text-center text-xs"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-9 shrink-0 px-0 text-center text-xs"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-9 shrink-0 px-0 text-center text-xs"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-9 shrink-0 px-0 text-center text-xs"
      data-mv-pin-input-item="true"
    />
  </div>
  <div class="flex gap-2" data-mv-pin-input="true">
    <input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-10 shrink-0 px-0 text-center text-sm"
      data-mv-pin-input-item="true"
    />
  </div>
  <div class="flex gap-2" data-mv-pin-input="true">
    <input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-12 shrink-0 px-0 text-center text-base"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-12 shrink-0 px-0 text-center text-base"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-12 shrink-0 px-0 text-center text-base"
      data-mv-pin-input-item="true"
    /><input
      type="text"
      maxlength="1"
      inputmode="numeric"
      placeholder="○"
      class="mv-input size-12 shrink-0 px-0 text-center text-base"
      data-mv-pin-input-item="true"
    />
  </div>
</div>

Hidden field (forms)

<form class="max-w-md space-y-3">
  <div class="flex gap-2" data-mv-pin-input="true" data-mv-pin-input-name="otp">
    <input type="text" maxlength="1" inputmode="numeric" class="mv-input size-10 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true"><input type="text" maxlength="1" inputmode="numeric" class="mv-input size-10 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true"><input type="text" maxlength="1" inputmode="numeric" class="mv-input size-10 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true"><input type="text" maxlength="1" inputmode="numeric" class="mv-input size-10 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true">
  </div>
  <p class="text-muted-foreground text-sm">
    A hidden field named <code class="text-foreground">otp</code> is kept in
    sync for native form posts.
  </p>
</form>

In modal

<div>
  <button type="button" class="mv-btn mv-btn-primary mv-btn-sm" data-mv-modal-toggle="#MVui-pin-modal">
    Open verification
  </button>
  <div class="mv-modal" data-mv-modal="true" id="MVui-pin-modal">
    <div class="mv-modal-content max-w-[400px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Enter code</h3>
        <button type="button" class="mv-modal-close" aria-label="Close modal" data-mv-modal-dismiss="#MVui-pin-modal">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body flex justify-center py-2">
        <div class="flex gap-2" data-mv-pin-input="true">
          <input type="text" maxlength="1" inputmode="numeric" placeholder="○" class="mv-input size-11 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true"><input type="text" maxlength="1" inputmode="numeric" placeholder="○" class="mv-input size-11 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true"><input type="text" maxlength="1" inputmode="numeric" placeholder="○" class="mv-input size-11 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true"><input type="text" maxlength="1" inputmode="numeric" placeholder="○" class="mv-input size-11 shrink-0 px-0 text-center text-sm" data-mv-pin-input-item="true">
        </div>
      </div>
      <div class="mv-modal-footer">
        <button type="button" class="mv-btn mv-btn-outline" data-mv-modal-dismiss="#MVui-pin-modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>