InputOtp

The Input Otp is used to enter one time passwords and verification codes.

Props

Prop	Type	Default	Description
size	string	sm	Size of the radio button. Options: sm, md and lg.
length	number	0	Number of OTP input fields to display. Determines the OTP code length.

Example component

<InputOtp :length="4" />

Sizes

Sm

The sm size is the default size and is used for most OTP. Setting this property is not required.

<InputOtp :length="4" size="sm"  />

Md

The md size provides a medium-sized OTP input, suitable for forms where a larger input is preferred for better readability.

<InputOtp :length="4" size="md" />

Lg

The lg size offers a large OTP input, ideal for accessibility or when you want the OTP fields to stand out more prominently.

<InputOtp :length="4" size="lg" />

6-digit OTP with Dash Separator

For 6-digit OTP codes, you can visually separate the input fields into two groups of three by adding a dash (-) after the third input. This improves readability and matches common UX patterns for secure code entry.

Secure code

-

This is a hint text to help user.

<div class="otp-container">
  <span class="otp-label">Secure code</span>
  <InputOtp :length="6">
    <template #default="{ attrs, events, index }">
      <input type="text" v-bind="attrs" v-on="events" class="custom-otp-input" />
      <span v-if="index === 3" class="otp-dash">-</span>
    </template>
  </InputOtp>
  <span class="otp-hint">This is a hint text to help user.</span>
</div>

Note:

• The dash appears only after the third input (index === 3).
• You can style .otp-dash and .custom-otp-input as needed to match.