Input OTP

Accessible one-time password component with copy paste support.

Examples

Default

<script setup>
import { ref } from 'vue'
import {
  InputOTP,
  InputOTPGroup,
  InputOTPSeparator,
  InputOTPSlot,
} from '@empathyds/vue'

const value = ref('')
</script>

<template>
  <InputOTP v-model="value" :maxlength="6">
    <InputOTPGroup>
      <InputOTPSlot :index="0" />
      <InputOTPSlot :index="1" />
      <InputOTPSlot :index="2" />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot :index="3" />
      <InputOTPSlot :index="4" />
      <InputOTPSlot :index="5" />
    </InputOTPGroup>
  </InputOTP>
</template>

Props

InputOTP

Prop	Type	Default	Description
maxlength	number	6	The number of characters in the OTP.
containerClass	string	-	The class for the container element.
inputMode	string	numeric	The input mode for the input element.

Slots

InputOTP

Slot	Description
default	The content of the input OTP.

InputOTPGroup

Slot	Description
default	The content of the group.

InputOTPSlot

Slot	Description
default	The content of the slot.