Input Pin ​

One at time input form.

Usage ​

Simple Usage ​

<template>
  <p-input-pin />
</template>

Number of Input ​

You can set how many input digit do you want with prop length, default is 5.

<template>
  <p-input-pin length="3" />
</template>

Sizing ​

Input has 4 variants size: xs, sm, md, lg, default is md.

<template>
  <p-input-pin size="xs" />
  <p-input-pin size="sm" />
  <p-input-pin size="md" />
  <p-input-pin size="lg" />
</template>

Disabled State ​

<template>
  <p-input-pin disabled />
</template>

Readonly State ​

<template>
  <p-input-pin readonly />
</template>

Error State ​

<template>
  <p-input-pin error />
</template>

Accept Character ​

You can filter what characters are allowed to be input using the prop accept. The value can be RegExp, or using available preset.

<template>
  <p-input-pin accept="numeric" />
</template>

👉 See Available Preset for more information

Binding v-model ​

Like other input, input value can be binding with v-model.

result:

-

<template>
  <p-input-pin v-model="result" />
</template>

API ​

Props ​

Slots ​

Events ​

See Also ​

• Form Group
• Input Group