PinInput

Used to capture a pin code or otp from the user

Default

code

<script setup>
import { ref } from 'vue'

const code = ref('1234')
</script>

<template>
  <PPinInput v-model="code" />
</template>

Disabled

code

<script setup>
import { ref } from 'vue'

const code = ref('12')
</script>

<template>
  <PPinInput v-model="code" disabled />
</template>

Placeholder

code

<template>
  <PPinInput placeholder="🥳" />
</template>

Types

Set the type attribute to limit what can be entered. (Default: numeric)

numeric

alphabetic

alphanumeric

numeric-password

alphabetic-password

alphanumeric-password

code

<template>
  <PStack direction="col" gap="4">
    <PPinInput label="numeric" type="numeric" />
    <PPinInput label="alphabetic" type="alphabetic" />
    <PPinInput label="alphanumeric" type="alphanumeric" />
    <PPinInput label="numeric-password" type="numeric-password" />
    <PPinInput label="alphabetic-password" type="alphabetic-password" />
    <PPinInput label="alphanumeric-password" type="alphanumeric-password" />
  </PStack>
</template>

Length

code

<template>
  <PPinInput :length="6" />
</template>

Error

Invalid pin code

code

<template>
  <PPinInput error="Invalid pin code" />
</template>

Label

Pin Code

code

<template>
  <PPinInput label="Pin Code" />
</template>