Pin Input

Allows users to enter a sequence of one-character alphanumeric inputs.

Examples

Default

<script setup>
import { ref } from 'vue'
import {
  PinInput,
  PinInputGroup,
  PinInputSeparator,
  PinInputSlot
} from '@empathyds/vue'

const value = ref([])
</script>

<template>
  <PinInput v-model="value" placeholder="○">
    <PinInputGroup>
      <PinInputSlot :index="0" />
      <PinInputSlot :index="1" />
      <PinInputSlot :index="2" />
      <PinInputSlot :index="3" />
    </PinInputGroup>
  </PinInput>
</template>

Props

PinInput

Prop	Type	Default	Description
modelValue	string[]	-	The controlled value of the pin input.
defaultValue	string[]	-	The default value.
placeholder	string	-	The placeholder character.
otp	boolean	false	Whether the input is for OTP.
type	text | number	text	The type of the input.
mask	boolean	false	Whether to mask the input.

Slots

PinInput

Slot	Description
default	The content of the pin input.

PinInputGroup

Slot	Description
default	The content of the group.

PinInputSlot

Slot	Description
default	The content of the slot.