Used to capture a pin code or otp from the user
<script setup>
import { ref } from 'vue'
const code = ref('1234')
</script>
<template>
<PPinInput v-model="code" />
</template>
<script setup>
import { ref } from 'vue'
const code = ref('12')
</script>
<template>
<PPinInput v-model="code" disabled />
</template>
<template>
<PPinInput placeholder="🥳" />
</template>
Set the type attribute to limit what can be entered. (Default: numeric)
<template>
<PStack direction="vertical">
<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>
<template>
<PPinInput :length="6" />
</template>
<template>
<PPinInput error="Invalid pin code" />
</template>
| Name | Type | Default | Description |
|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | - | Box side length in px: 24, 30, 36 or 44, falling back to the config size |
| error | boolean | string | - | Any truthy value turns on the error border and focus ring |
| length | number | 4 | Number of single-character boxes to render |
| readonly | boolean | - | Allow focus and selection but block typing |
| disabled | boolean | - | Disable all boxes and ignore typed or pasted input |
| model-value | string | `` | Current pin code, one character per box |
| placeholder | string | â—‹ | Character shown in each empty box |
| type | 'numeric' | 'alphabetic' | 'alphanumeric' | 'numeric-password' | 'alphabetic-password' | 'alphanumeric-password' | numeric | Restrict input to the given character set, the -password variants also mask it |
| Name | Type | Description |
|---|
| change | (value: string) => void | Emitted when a box is filled or cleared, when the whole code is pasted, or when an IME composition ends. |
| update:modelValue | (value: string) => void | Emitted alongside change on every value update. |
| Name | Type | Description |
|---|
| focus | () => void | Select the first box so the next keystroke starts from the beginning. |
| blur | () => void | Blur every box at once. |